:host-context()

:host-context() は CSS の擬似クラス関数で、内部で使用される CSS を含むシャドウ DOM のシャドウホストを選択します (そのため、シャドウ DOM の中のカスタム要素を選択することができます)。 — しかし、関数の引数として与えられたセレクターがシャドウホストの祖先に一致した場合のみです。

言い換えれば、これによってカスタム要素やそのカスタム要素のシャドウ DOM 内のものは、外部 DOM 内の位置や、祖先要素に適用されたクラスや属性に基づいて、異なるスタイルを適用することができます。

典型的な使い方としては、子孫のセレクター式 (例えば h1) を使って、 <h1> の中にあるカスタム要素のインスタンスのみを選択することができます。もう一つの典型的な使用法は、内部要素が任意の子孫要素のクラスや属性に反応するようにすることです。例えば、 .dark-theme クラスが <body> に適用されたときに、異なるテキスト色を適用することができます。

注: これはシャドウ DOM の外で使用した場合、効果がありません。

/* Selects a shadow root host, only if it is
   a descendant of the selector argument given */ 
:host-context(h1) {
  font-weight: bold;
}

:host-context(main article) {
  font-weight: bold;
}

/* Changes paragraph text color from black to white when 
   a .dark-theme class is applied to the document body */
p {
  color: #000;
}

:host-context(body.dark-theme) p {
  color: #fff;
}

構文

:host-context( <compound-selector-list> )
where 
<compound-selector-list> = <compound-selector>#
where 
<compound-selector> = [ <type-selector>? <subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!
where 
<type-selector> = <wq-name> | <ns-prefix>? '*'
<subclass-selector> = <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector>
<pseudo-element-selector> = ':' <pseudo-class-selector>
<pseudo-class-selector> = ':' <ident-token> | ':' <function-token> <any-value> ')'
where 
<wq-name> = <ns-prefix>? <ident-token>
<ns-prefix> = [ <ident-token> | '*' ]?  | 
<id-selector> = <hash-token>
<class-selector> = '.' <ident-token>
<attribute-selector> = '[' <wq-name> ']' | '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'
where 
<attr-matcher> = [ '~' |  |  | '^' | '$' | '*' ]? '='
<attr-modifier> = i | s

例

シャドウホストの選択的なスタイル付け

以下のスニペットは host-selectors example から取ったものです。 (ライブ版もあります).

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

<h1>Host selectors <a href="#"><context-span>example</context-span></a></h1>

要素のコンストラクターの中で、 style および span 要素を生成し、 span の中をカスタム要素の内容で埋め、 style 要素をいくつかの CSS 規則で埋めます。

let style = document.createElement('style');
let 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-context(article, aside) { color: gray; }' +
                    ':host(.footer) { color : red; }' +
                    ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }';

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

仕様書

仕様書 状態 備考
CSS Scoping Module Level 1
:host-context() の定義		 草案 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
:host-context()Chrome 完全対応 54Edge 完全対応 79Firefox 未対応 なし
補足
未対応 なし
補足
補足 See bug 1082060.
IE 未対応 なしOpera 完全対応 41Safari 未対応 なしWebView Android 完全対応 54Chrome Android 完全対応 54Firefox Android 未対応 なし
補足
未対応 なし
補足
補足 See bug 1082060.
Opera Android 完全対応 41Safari iOS 未対応 なしSamsung Internet Android 完全対応 6.0

凡例

完全対応  
完全対応
未対応  
未対応
実装ノートを参照してください。
実装ノートを参照してください。

関連情報