ここにshadowDOMでコンポーネントを作成したコードがあります。簡単にするために、私はsetTimeoutを使ってCSSの長いロード時間をエミュレートしています。 1秒後にCSSに要素を適用します。
あなたが述べたように、要素はCSSが読み込まれるまで片方向に見えます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>FOUC Prevention for WC</title>
<script>
var delayedStyles = document.createElement('style');
delayedStyles.textContent = `
:host {
background-color: #DEE;
border: 1px solid #999;
display: block;
width: 400px;
}
.innerShell {
display: block !important;
}
h1 {
color: green;
font: 18px/1em Tahoma;
padding: 3px 6px;
}
p {
margin: 5px 10px;
padding: 10px;
}
`;
var template = document.createElement('div');
template.setAttribute('style', 'display: none;');
template.className = 'innerShell';
template.innerHTML = `
<h1>The header</h1>
<p>Some body content</p>
`;
// Class for `<my-component>`
class MyComponent extends HTMLElement {
constructor() {
super();
var sr = this.attachShadow({mode: 'open'});
setTimeout(() => sr.appendChild(delayedStyles.cloneNode(true)), 1000);
sr.appendChild(template.cloneNode(true));
}
}
// Define our web component
customElements.define('my-component', MyComponent);
</script>
</head>
<body>
<my-component></my-component>
</body>
</html>
はこれを行うために、私は私の影のDOMに私のトップレベルの要素のstyleタグを設定します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>FOUC Prevention for WC</title>
<script>
var delayedStyles = document.createElement('style');
delayedStyles.textContent = `
:host {
background-color: #DEE;
border: 1px solid #999;
display: block;
width: 400px;
}
h1 {
color: green;
font: 18px/1em Tahoma;
padding: 3px 6px;
}
p {
margin: 5px 10px;
padding: 10px;
}
`;
var template = document.createElement('div');
template.innerHTML = `
<h1>The header</h1>
<p>Some body content</p>
`;
// Class for `<my-component>`
class MyComponent extends HTMLElement {
constructor() {
super();
var sr = this.attachShadow({mode: 'open'});
setTimeout(() => sr.appendChild(delayedStyles.cloneNode(true)), 1000);
sr.appendChild(template.cloneNode(true));
}
}
// Define our web component
customElements.define('my-component', MyComponent);
</script>
</head>
<body>
<my-component></my-component>
</body>
</html>
はマイナーチェンジで、私たちは、CSSがロードされるまで要素を非表示にすることができます。私はそれをdisplay: none;に設定しました。これは、陰影DOMの内部内容を隠します。
1秒後に、CSSがロードされると、display: none;がdisplay: block !importantで上書きされます。 styleタグで設定したCSSを具体的にするには、!importantを使用する必要があります。
CSSが読み込まれた後でのみ、要素が表示されます。別のオプションとして
また、あなたの<link>タグのonloadイベントハンドラに置くことができます：それはロードされ、その後、ちょうどstyle属性を削除したことを、コードで、
<link rel="stylesheet" href="mystylesheet.css" onload="sheetLoaded()" onerror="sheetError()">
あなたが知っているでしょう。
'linkElement.onload =（）=> ...'を使用しています:) – olanod