Simple DOM example

クラス定義の際、インスタンスが初期化された時に用意されるあらゆる関数を定義したコンストラクタを定義します。

shadow root の作成

shadow DOM 構造の作成

shadow DOM のスタイル

そのあと、 {{htmlelement("style")}} 要素を作り CSS でスタイルを付けます。

shadow DOM を shadow root に追加

カスタム要素の使用

クラスを定義すると、定義したようにカスタム要素を使用することができます。(Using custom elements)

内部スタイル vs 外部スタイル

+### 内部スタイルと外部スタイル -

上述の例では{{htmlelement("style")}}要素を用いてShadow DOMにスタイルを適用しましたが、代わりに{{htmlelement("link")}}要素で外部のスタイルシートを参照することでも完全に実現できます。

+上記の例では {{htmlelement("style")}} 要素を用いてシャドウ DOM にスタイルを適用しましたが、代わりに完全に {{htmlelement("link")}} 要素から外部スタイルシートを参照することが可能です。 -

例として、popup-info-box-external-stylesheet の例を見てください。(ソースコード)

+例えば、 [popup-info-box-external-stylesheet](https://mdn.github.io/web-components-examples/popup-info-box-external-stylesheet/) のコードを少し見てみましょう（[ソースコード](https://github.com/mdn/web-components-examples/blob/master/popup-info-box-external-stylesheet/main.js)はこちら）。 -

// Apply external styles to the shadow dom
+```js
+// 外部スタイルシートをシャドウ DOM に適用
 const linkElem = document.createElement('link');
 linkElem.setAttribute('rel', 'stylesheet');
 linkElem.setAttribute('href', 'style.css');
 
-// Attach the created element to the shadow dom
-shadow.appendChild(linkElem);

+// 生成された要素をシャドウ DOM に添付 +shadow.appendChild(linkElem); +``` -

{{htmlelement("link")}}要素がshadow rootの描画をブロックしないため、スタイルシートがロードされている間flash of unstyled content(FOUC)が起こりうることに注意してください。

+なお、 {{htmlelement("link")}} 要素はシャドウルートの描画をブロックしないので、スタイルシートのロード中にスタイル付けされていないコンテンツ (FOUC) が一瞬表示されるかもしれないことに注意してください。 -

多くのモダンブラウザは、共通ノードからコピーされた、または同一のテキストを持つ {{htmlelement("style")}}タグの最適化を実装して、単一のバッキングスタイルシートを共有できるようにしています。この最適化により、外部スタイルと内部スタイルのパフォーマンスは同様になります。

+最近のブラウザーの多くは、共通のノードからクローンされた、あるいは同一のテキストを持つ {{htmlelement("style")}} タグに対して、単一のバッキングスタイルシートを共有できるようにする最適化を実装しています。この最適化によって、外部スタイルでも内部スタイルでも性能は同程度になるはずです。 -

参考

+## 関連情報 -

High-level view

基本的な使い方