--- title: Element.shadowRoot slug: Web/API/Element/shadowRoot tags: - プロパティ - リファレンス - 要素 - 試験的 translation_of: Web/API/Element/shadowRoot ---

{{APIRef('Shadow DOM')}} {{SeeCompatTable}}{{draft}}

読み取り専用のプロパティであるElement.shadowRootは、そのエレメントによってホストされたshadow rootへの読み取りアクセスを提供します。既に存在している要素にshadow rootを追加する場合は {{domxref('Element.attachShadow')}} を使用してください。

文法

var shadowroot = element.shadowRoot;

値

{{domxref('ShadowRoot')}} オブジェクトです。 アタッチされた時の{{DOMxRef("ShadowRoot.mode", "mode")}} に closed が指定された場合には  null となります。

Examples

The following snippets are taken from our life-cycle-callbacks example (see it live also), which creates an element that displays a square of a size and color specified in the element's attributes.

Inside the <custom-square> element's class definition we include some life cycle callbacks that make a call to an external function, updateStyle(), which actually applies the size and color to the element. You'll see that we are passing it this (the custom element itself) as a parameter.

connectedCallback() {
  console.log('Custom square element added to page.');
  updateStyle(this);
}

attributeChangedCallback(name, oldValue, newValue) {
  console.log('Custom square element attributes changed.');
  updateStyle(this);
}

In the updateStyle() function itself, we get a reference to the shadow DOM using {{domxref("Element.shadowRoot")}}. From here we use standard DOM traversal techniques to find the {{htmlelement("style")}} element inside the shadow DOM and then update the CSS found inside it:

function updateStyle(elem) {
  const shadow = elem.shadowRoot;
  const childNodes = Array.from(shadow.childNodes);

  childNodes.forEach(childNode => {
    if (childNode.nodeName === 'STYLE') {
      childNode.textContent = `
        div {
          width: ${elem.getAttribute('l')}px;
          height: ${elem.getAttribute('l')}px;
          background-color: ${elem.getAttribute('c')};
        }
      `;
    }
  });
}

仕様

仕様 状態 注脚
{{SpecName('DOM WHATWG', '#dom-element-shadowroot', 'shadowRoot')}} {{Spec2('DOM WHATWG')}}

ブラウザ互換性

{{Compat("api.Element.shadowRoot")}}

関連情報