ShadowRoot

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');
    }
  }
}

仕様

ブラウザ実装状況