ShadowRoot

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

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

プロパティ

ShadowRoot.delegatesFocus 読取専用
シャドウが添付されたときに delegatesFocus が設定されていたかどうかを示す真偽値を返します (Element.attachShadow() を参照)。
ShadowRoot.host 読取専用
ShadowRoot が追加された DOM 要素への参照を返します。
ShadowRoot.innerHTML
ShadowRoot の内部ツリーへの参照を設定する、または受け取ることが出来ます。
ShadowRoot.mode 読取専用
ShadowRoot のモードで open または closed の値を取ります。これはシャドウルートの内部の機能に JavaScript からアクセスできるかどうかを定義します。

DocumentOrShadowRoot 由来のプロパティ

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

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

メソッド

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

DocumentOrShadowRoot.getSelection()
ユーザーによって選択されたテキストの範囲または現在のキャレットの位置を表現する 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 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
ShadowRoot
実験的
Chrome 完全対応 57Edge 未対応 なし
補足
未対応 なし
補足
補足 In Development
Firefox 完全対応 63
完全対応 63
未対応 59 — 63
無効
無効 From version 59 until version 63 (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 完全対応 57Chrome Android 完全対応 57Firefox Android 完全対応 63
完全対応 63
未対応 59 — 63
無効
無効 From version 59 until version 63 (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 完全対応 41Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 6.0
delegatesFocus
実験的
Chrome 完全対応 57Edge 未対応 なしFirefox ? IE 未対応 なしOpera ? Safari 未対応 なしWebView Android 完全対応 57Chrome Android 完全対応 57Firefox Android ? Opera Android ? Safari iOS 未対応 なしSamsung Internet Android ?
Features included from the DocumentOrShadowRoot mixin
実験的
Chrome 完全対応 57Edge 未対応 なし
補足
未対応 なし
補足
補足 Features still implemented on the Document interface
Firefox 完全対応 63IE 未対応 なしOpera 完全対応 40Safari 未対応 なし
補足
未対応 なし
補足
補足 Features still implemented on the Document interface
WebView Android 完全対応 57Chrome Android 完全対応 57Firefox Android 完全対応 63Opera Android 完全対応 41Safari iOS 未対応 なし
補足
未対応 なし
補足
補足 Features still implemented on the Document interface
Samsung Internet Android 完全対応 6.0
host
実験的
Chrome 完全対応 57Edge 未対応 なし
補足
未対応 なし
補足
補足 In Development
Firefox 完全対応 63
完全対応 63
未対応 59 — 63
無効
無効 From version 59 until version 63 (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 完全対応 57Chrome Android 完全対応 57Firefox Android 完全対応 63
完全対応 63
未対応 59 — 63
無効
無効 From version 59 until version 63 (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 完全対応 41Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 6.0
innerHTML
実験的非標準
Chrome 完全対応 57Edge 未対応 なし
補足
未対応 なし
補足
補足 In Development
Firefox 完全対応 63
完全対応 63
未対応 59 — 63
無効
無効 From version 59 until version 63 (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 完全対応 57Chrome Android 完全対応 57Firefox Android 完全対応 63
完全対応 63
未対応 59 — 63
無効
無効 From version 59 until version 63 (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 完全対応 41Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 6.0
mode
実験的
Chrome 完全対応 57Edge 未対応 なし
補足
未対応 なし
補足
補足 In Development
Firefox 完全対応 63
完全対応 63
未対応 59 — 63
無効
無効 From version 59 until version 63 (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 完全対応 57Chrome Android 完全対応 57Firefox Android 完全対応 63
完全対応 63
未対応 59 — 63
無効
無効 From version 59 until version 63 (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 完全対応 41Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 6.0

凡例

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