:host-context()

:host-context() は CSS の擬似クラスで、シャドウホスト（シャドウルートを保有する要素）とその DOM 上の祖先のセレクターに基づいて、シャドウ DOM 内の要素のスタイルを別々に設定することができます。

通常、シャドウ DOM 内の要素は、その外部の DOM から分離されています。:host-context() を使用すると、このシャドウ DOM の「外側を覗き見」して、要素の親要素のいずれかが特定の CSS セレクターと一致するかどうかを確認することができます。例えば、<body> に .dark-theme クラスが適用されている場合、シャドウルート内の要素に別のテキストの色を適用することができます。

これを次のように考えてみてください。 <greenhouse> という独自の要素があり、その中に <chameleon> が存在するとします。ここで、 <greenhouse> はシャドウ DOM ホストであり、 <chameleon> 要素はシャドウ DOM 内にあります。 :host-context() を使用すると、 <greenhouse> の環境に応じて <chameleon> の外観を変更することができます。 <greenhouse> が日なた（クラス "sunny-theme" が指定されている）にある場合、 <chameleon> は黄色になります。 <greenhouse> が日陰（代わりにクラス "shady-theme" が適用されている）にある場合、 <chameleon> は青色になります。

このセレクターは、すべてのシャドウ境界を貫通します。これは、<greenhouse> またはホストの祖先および祖先の DOM のいずれかに直接適用されている、日なたのテーマまたは日陰のテーマを、文書ルートに到達するまでずっと見ていきます。

セレクターを直接 <greenhouse> ホストのみに制限したり、選択をホストの DOM に制限したりするには、代わりに :host または :host() 擬似クラスを使用します。

メモ: これは、シャドウ DOM の外で使用しても効果はありません。

:host-context() の詳細度は、擬似クラスの詳細度と、関数の引数として渡されたセレクターの詳細度の合計です。

試してみましょう

/* 以下の CSS がシャドウ DOM 内に適用されています。 */ :host-context(.container) { border: 5px dashed green; } :host-context(h1) { color: red; }

<!-- シャドウ DOM 外の要素 --> <div class="container"> <h1 id="shadow-dom-host"></h1> </div>

const shadowDom = init(); // シャドウ DOM に <span> 要素を追加 const span = document.createElement("span"); span.textContent = "シャドウ DOM の内部"; shadowDom.appendChild(span); // シャドウ DOM を #shadow-dom-host 要素に添付する function init() { const host = document.getElementById("shadow-dom-host"); const shadowDom = host.attachShadow({ mode: "open" }); const cssTab = document.querySelector("#css-output"); const shadowStyle = document.createElement("style"); shadowStyle.textContent = cssTab.textContent; shadowDom.appendChild(shadowStyle); cssTab.addEventListener("change", () => { shadowStyle.textContent = cssTab.textContent; }); return shadowDom; }

css

/* 指定されたセレクター引数の子孫である場合にのみ、 シャドウルートホストを選択します。 */ :host-context(h1) { font-weight: bold; } /* .dark-theme クラスが文書本体に適用されている場合に、 段落のテキストの色を黒から白に変更します。 */ p { color: black; } :host-context(body.dark-theme) p { color: white; }

構文

css

:host-context(<compound-selector>) { /* ... */ }

例

シャドウホストの選択的なスタイル設定

以下は、ホストセレクターの例（ライブでも見る）から抜粋したものです。

この例では、テキストを囲むことができる基本的なカスタム要素 <context-span> があります。

html

<h1> ホストセレクターの<a href="#"><context-span>例</context-span></a> </h1>

要素のコンストラクター内で style 要素と span 要素を作成し、 span 要素にカスタム要素のコンテンツを入れ、style 要素に CSS ルールを入れます。

const style = document.createElement("style"); const span = document.createElement("span"); span.textContent = this.textContent; const shadowRoot = this.attachShadow({ mode: "open" }); shadowRoot.appendChild(style); shadowRoot.appendChild(span); style.textContent = "span:hover { text-decoration: underline; }" + ":host-context(h1) { font-style: italic; }" + ':host-context(h1)::after { content: " - no links in headers!" }' + ":host(.footer) { color : red; }" + ":host { background: rgb(0 0 0 / 10%); padding: 2px 5px; }";

:host-context(h1) { font-style: italic; } および :host-context(h1):after { content: " - no links in headers!" } のルールは <h1> 内の <context-span> 要素のインスタンス（この例ではシャドウホスト）をスタイル設定します。このデザインでは、カスタム要素が <h1> の中に現れてはいけないことを明確にするために使用しています。