こんにちは、技術部の U です！
はじめに
グローバルな CSS や Javascript の影響を受けずに DOM を作成したい場面があり、Shadow DOM を使用して実現したので、まとめていきます！
Shadow DOM とは？
Web コンポーネント内の DOM 構造をカプセル化するための技術です。
これにより、コンポーネント内のスタイルとマークアップが外部の DOM から隔離され、外部の CSS や Javascript の影響を受けなくなります。
詳細はこちら
使用例
Javascript
ここでは外部の CSS や Javascript からの影響を受けたくないShadowParagraphというカスタム要素を作成します。
まず、HTMLElementのattachShadowプロパティを使用して、ShadowDOM を作成します。
今回は<shadow-paragraph>タグ内に ShadowDOM を作成しており、その中に<p>タグへの赤色のスタイルと<p>Shadow DOMです！！</p>を定義しています。
js
class ShadowParagraph extends HTMLElement {
constructor() {
super();
// ShadowDOMの作成
const shadow = this.attachShadow({ mode: "closed" });
// カプセル化したい要素を追加
shadow.innerHTML = `
<style>
/* Shadow DOMスタイル */
p { color: red; }
</style>
<p>Shadow DOMです！！</p>
`;
}
}
customElements.define("shadow-paragraph", ShadowParagraph);
HTML
比較として通常 DOM の<p>と先程の<shadow-paragraph>を表示します。
html
<p>これは通常DOMです！</p>
<shadow-paragraph></shadow-paragraph>
CSS
グローバルな CSS として、<p>タグに対して青色と太字のスタイルを適用します。
css
p {
color: blue;
font-weight: bold;
}
結果
通常 DOM は青色と太字が適用されているのに対し、ShadowDOM で定義した部分は赤色のスタイルを適用することができました！
補足
今回のShadowParagraphクラスでは、attachShadowプロパティに対して{ mode: "closed" }を渡しているため、別の Javascript からの影響を受けません。
（Shadow DOM にアクセスしようとするとnullになります。）{ mode: "open" }を渡すことで別の Javascript からもアクセスできるようになります。
まとめ
外部コンテンツの埋め込みや UI コンポーネントの作成など、DOM をカプセル化したい時には使ってみてください！
関連記事
- 2024-02-21
- テクノロジー