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
補足 無効
補足 See bug 1205323
無効 From version 61: 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
補足 無効
補足 See bug 1205323
無効 From version 61: 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,