CSS:host 疑似クラスは、その CSS を含むシャドウ DOM のシャドウホストを選択します。 — 言い換えれば、シャドウ DOM の中からカスタム要素を選択できるようにします。

メモ: これはシャドウ DOM の外で使われたときには効果がありません。

/* シャドウのルートホストを選択 */
	:host {
	  font-weight: bold;
	}
	

構文

Syntax not found in DB!

以下のスニペットは、 host セレクターの例 (ライブでも参照してください) から取りました。

この例では、テキストの周りを囲むことができる簡単なカスタム要素 — <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 { background: rgba(0,0,0,0.1); padding: 2px 5px; } の規則は、文書中の <context-span> 要素 (このインスタンスのシャドウホスト) のすべてのインスタンスにスタイル付けします。

仕様書

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

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応Chrome 完全対応 ありEdge 未対応 なし
補足
未対応 なし
補足
補足 Under consideration
Firefox 完全対応 63
完全対応 63
未対応 61 — 65
無効
無効 From version 61 until version 65 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 未対応 なし
補足
未対応 なし
補足
補足 Under consideration
Firefox Android 完全対応 63
完全対応 63
未対応 61 — 65
無効
無効 From version 61 until version 65 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09
最終更新者: mfuji09,