ShadowRoot インターフェースは Shadow DOM API の1つで、ドキュメントの DOM ツリーから分離してレンダリングされた部分木の根ノードを指します。

shadow ツリーが mode オプションを open に指定して Element.attachShadow() から作られた場合、shadow root への参照は Element.shadowRoot プロパティによって読み出すことが出来ます。

プロパティ

ShadowRoot.mode 読取専用
ShadowRoot のモードで open または closed の値を取ります。 open の場合、shadow root の内部にJavaScriptからアクセス出来るようになります。closed の場合はアクセス出来ません。
ShadowRoot.host 読取専用
ShadowRoot が追加された DOM 要素への参照を返します。
ShadowRoot.innerHTML
ShadowRoot の内部ツリーへの参照を設定する、または受け取ることが出来ます。

DocumentOrShadowRoot 由来のプロパティ

ShadowRoot インターフェースは DocumentOrShadowRoot で定義された以下のプロパティを含みます。これは Chrome ブラウザのみ実装されており、他のブラウザでは依然 Document インターフェースで実装されています。

DocumentOrShadowRoot.activeElement 読取専用
shadow ツリーの範囲内で、フォーカスされている Element を返します。
DocumentOrShadowRoot.styleSheets 読取専用
ドキュメントに明示的にリンクされている、または埋め込まれているCSSStyleSheet オブジェクトの StyleSheetList を返します。

メソッド

ShadowRoot インターフェースは DocumentOrShadowRoot で定義された以下のプロパティを含みます。これは Chrome ブラウザのみ実装されており、他のブラウザでは依然 Document インターフェースで実装されています。

DocumentOrShadowRoot.getSelection()
ユーザーによって選択されたテキストの range または現在のキャレットの位置を表現する Selection オブジェクトを返します。
DocumentOrShadowRoot.elementFromPoint()
指定された座標における最上位の要素を返します。 
DocumentOrShadowRoot.elementsFromPoint()
指定された座標における全要素からなる配列を返します。
DocumentOrShadowRoot.caretPositionFromPoint()
キャレットを含む DOM ノードとキャレットのオフセットを含む CaretPosition オブジェクトを返します。

以下のコードは、サイズと色の属性が指定された四角形の要素を作る life-cycle-callbacks の例です。 (実行例)

<custom-square> 要素のクラス定義の中に、外部関数である updateStyle を呼び出す life-cycle-callbacks が含まれています。updateStyle は要素のサイズと色を適用しています。this (カスタム要素自身) をパラメータとして関数に渡していることが分かるでしょう。

connectedCallback() {
  console.log('四角形のカスタム要素がページに追加されました。');
  updateStyle(this);
}

attributeChangedCallback(name, oldValue, newValue) {
  console.log('四角形のカスタム要素の属性が変更されました。');
  updateStyle(this);
}

updateStyle 関数の中では、Element.shadowRoot を利用して shadow DOM への参照を取得しています。shadow DOM 内では、標準的な DOM の探索手法を用いて <style> を探し、CSS を更新しています。

function updateStyle(elem) {
  var shadow = elem.shadowRoot;
  var childNodes = shadow.childNodes;
  for(var i = 0; i < childNodes.length; i++) {
    if(childNodes[i].nodeName === 'STYLE') {
      childNodes[i].textContent = 'div {' +
                          ' width: ' + elem.getAttribute('l') + 'px;' +
                          ' height: ' + elem.getAttribute('l') + 'px;' +
                          ' background-color: ' + elem.getAttribute('c');
    }
  }
}

仕様

仕様書 策定状況 コメント
DOM
Interface ShadowRoot の定義
現行の標準  

ブラウザ実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応
実験的
Chrome 完全対応 53Edge 未対応 なし
補足
未対応 なし
補足
補足 In Development
Firefox 完全対応 63
完全対応 63
未対応 59 — 65
無効
無効 From version 59 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 完全対応 40Safari 完全対応 10.1WebView Android 完全対応 53Chrome Android 完全対応 53Edge Mobile 未対応 なし
補足
未対応 なし
補足
補足 In Development
Firefox Android 完全対応 63
完全対応 63
未対応 59 — 65
無効
無効 From version 59 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 完全対応 40Safari iOS 完全対応 10.1Samsung Internet Android 完全対応 6.0
delegatesFocus
実験的
Chrome 完全対応 45Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android 完全対応 45Chrome Android 完全対応 45Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Features included from the DocumentOrShadowRoot mixin
実験的
Chrome 完全対応 53Edge 未対応 なし
補足
未対応 なし
補足
補足 Features still implemented on the Document interface
Firefox 未対応 なし
補足
未対応 なし
補足
補足 Features still implemented on the Document interface
補足 See bug 1205323
IE 未対応 なしOpera 完全対応 40Safari 未対応 なし
補足
未対応 なし
補足
補足 Features still implemented on the Document interface
WebView Android 完全対応 53Chrome Android 完全対応 53Edge Mobile 未対応 なし
補足
未対応 なし
補足
補足 Features still implemented on the Document interface
Firefox Android 未対応 なし
補足
未対応 なし
補足
補足 Features still implemented on the Document interface
補足 See bug 1205323
Opera Android 完全対応 40Safari iOS 未対応 なし
補足
未対応 なし
補足
補足 Features still implemented on the Document interface
Samsung Internet Android 完全対応 6.0
host
実験的
Chrome 完全対応 53Edge 未対応 なし
補足
未対応 なし
補足
補足 In Development
Firefox 完全対応 63
完全対応 63
未対応 59 — 65
補足 無効
補足 See bug 1205323
無効 From version 59 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 完全対応 40Safari 完全対応 10.1WebView Android 完全対応 53Chrome Android 完全対応 53Edge Mobile 未対応 なし
補足
未対応 なし
補足
補足 In Development
Firefox Android 完全対応 63
完全対応 63
未対応 59 — 65
補足 無効
補足 See bug 1205323
無効 From version 59 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 完全対応 40Safari iOS 完全対応 10.1Samsung Internet Android 完全対応 6.0
innerHTML
実験的非標準
Chrome 完全対応 53Edge 未対応 なし
補足
未対応 なし
補足
補足 In Development
Firefox 完全対応 63
完全対応 63
未対応 59 — 65
補足 無効
補足 See bug 1205323
無効 From version 59 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 完全対応 40Safari 完全対応 10.1WebView Android 完全対応 53Chrome Android 完全対応 53Edge Mobile 未対応 なし
補足
未対応 なし
補足
補足 In Development
Firefox Android 完全対応 63
完全対応 63
未対応 59 — 65
補足 無効
補足 See bug 1205323
無効 From version 59 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 完全対応 40Safari iOS 完全対応 10.1Samsung Internet Android 完全対応 6.0
mode
実験的
Chrome 完全対応 53Edge 未対応 なし
補足
未対応 なし
補足
補足 In Development
Firefox 完全対応 63
完全対応 63
未対応 59 — 65
補足 無効
補足 See bug 1205323
無効 From version 59 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 完全対応 40Safari 完全対応 10.1WebView Android 完全対応 53Chrome Android 完全対応 53Edge Mobile 未対応 なし
補足
未対応 なし
補足
補足 In Development
Firefox Android 完全対応 63
完全対応 63
未対応 59 — 65
補足 無効
補足 See bug 1205323
無効 From version 59 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 完全対応 40Safari iOS 完全対応 10.1Samsung Internet Android 完全対応 6.0

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

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

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