ShadowRoot
==========

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Learn more
* See full compatibility
* Report feedback
**`ShadowRoot`** はシャドウ DOM API のインターフェイスで、文書の DOM ツリーから分離してレンダリングされた部分ツリーのルートノードを指します。

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

EventTarget

Node

DocumentFragment

ShadowRootインスタンスプロパティ
-----------

`ShadowRoot.activeElement` 読取専用 

フォーカスを持っているシャドウツリー内の `Element` を返します。

`ShadowRoot.adoptedStyleSheets` (en-US)

 シャドウ DOM のサブツリーで使用するために構築されたスタイルシートの配列を追加します。
 これらは、同じ親 `Document` ノードを共有する他の DOM サブツリーや、文書自身と共有されることがあります。


`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.getAnimations()`

現在有効なすべての `Animation` オブジェクトのうち、ターゲット要素がシャドウツリーの子孫であるものの配列を返します。

`ShadowRoot.getSelection()` 
Non-standard

ユーザーによって選択されたテキストの範囲または現在のキャレットの位置を表現する `Selection` オブジェクトを返します。

`ShadowRoot.elementFromPoint()` 
Non-standard

指定された座標における最上位の要素を返します。

`ShadowRoot.elementsFromPoint()` 
Non-standard

指定された座標における全要素からなる配列を返します。

イベント
----

以下のイベントは `HTMLSlotElement` からのイベントバブリングによって `ShadowRoot` で利用できます。

`HTMLSlotElement` `slotchange` event

そのスロットに含まれるノードが変更されたときに発行されるイベント。

例
-

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

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


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

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


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


```js
function updateStyle(elem) {
  const shadow = elem.shadowRoot;
  const childNodes = shadow.childNodes;
  for (const node of childNodes) {
    if (node.nodeName === "STYLE") {
      node.textContent = `
div {
 width: ${elem.getAttribute("l")}px;
 height: ${elem.getAttribute("l")}px;
 background-color: ${elem.getAttribute("c")};
}
 `;
    }
  }
}
```

仕様書
---

| Specification |
| --- |
| DOM Standard # interface-shadowroot |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.