DOM

：

インターフェイス

：

ShadowRoot インターフェイス

　 編集：2022.04.08 by T.A.

→● MS

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

要素のシャドウ ルートへの参照は Element.shadowRoot プロパティで受け取ることができます。これは Element.attachShadow() で mode オプションが open に設定されて作成されたときに提供されます。

プロパティ
ShadowRoot.activeElement 読取専用 ●
フォーカスを持っているシャドウツリー内の Element を返します。
ShadowRoot.delegatesFocus 読取専用 非標準 廃止 ●
シャドウが取り付けられたときに delegatesFocus が設定されていたかどうかを示す論理値を返します（Element.attachShadow() を参照）。
ShadowRoot.fullscreenElement 読取専用 ●
このシャドウツリーで現在全画面モードになっている要素です。
ShadowRoot.host 読取専用 ●
ShadowRoot が取り付けられた DOM 要素への参照を返します。
ShadowRoot.innerHTML 非標準
ShadowRoot の内部の DOM ツリーへの参照を設定したり返却したりします。
ShadowRoot.mode 読取専用 ●
ShadowRoot のモードで open または closed の値を取ります。これはシャドウルートの内部の機能に JavaScript からアクセスできるかどうかを定義します。
ShadowRoot.pictureInPictureElement 読取専用
シャドウツリー内で現在ピクチャ イン ピクチャ モードで表示されている Element を返します。
ShadowRoot.pointerLockElement 読取専用
ポインターがロックされている間、マウスイベントのターゲットとして設定されている Element を返します。 ロックが保留中か、ポインターがロックされていないか、ターゲットがほかのツリーにある場合は null を返します。
ShadowRoot.styleSheets 読取専用
シャドウツリーに明示的にリンクされている、または埋め込まれている CSSStyleSheet オブジェクトの StyleSheetList を返します。
イベントハンドラー
ShadowRoot.onslotchange
イベントハンドラーで、slotchange イベントが発行されたときに呼び出されるコードを表します。
メソッド
ShadowRoot.getAnimations()
現在有効なすべての Animation オブジェクトのうち、ターゲット要素がシャドウツリーの子孫であるものの配列を返します。
ShadowRoot.getSelection()
ユーザーによって選択されたテキストの範囲または現在のキャレットの位置を表現する Selection オブジェクトを返します。
ShadowRoot.elementFromPoint()
指定された座標における最上位の要素を返します。
ShadowRoot.elementsFromPoint()
指定された座標における全要素からなる配列を返します。
例
以下のコードは、サイズと色の属性が指定された四角形の要素を作る life-cycle-callbacks の例です。（ライブでも確認）

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

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

attributeChangedCallback(name, oldValue, newValue) {
  console.log('四角形のカスタム要素の属性が変更されました。');
  updateStyle(this);
}
updateStyle() 関数の中では、Element.shadowRoot を利用してシャドウ DOM への参照を取得しています。シャドウ 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') + ';' +
        '}';
    }
  }
}

ShadowRoot ノードは、単に shadow 根（shadow root）とも称される。

各 shadow 根には、次に挙げるものが結び付けられる：

shadow 根のホストが null になることは決してない。

ShadowRoot.slotAssignment→●
slot あてがいモード が返る。
テスト
HTML：

ここに表示
スクリプト組み込み：



スクリプト：


スクリプト：



表示内容：
表示内容：