Element.attachShadow()

Element.attachShadow() メソッドは、シャドウ DOM ツリーを特定の要素に追加し、そのシャドウルート (ShadowRoot) への参照を返します。

シャドウツリーを追加できる要素

シャドウルートは全ての要素に追加できるわけではありません。 (<a> など) セキュリティ上の理由でシャドウ DOM を持てないものもあります。以下にシャドウルートを追加できる要素を列挙します。

構文

var shadowroot = element.attachShadow(shadowRootInit);

引数

shadowRootInit
ShadowRootInit ディクショナリで、以下のプロパティを含みます。
mode

文字列で、シャドウ DOM ツリーのカプセル化モードを指定します。以下のうちの一つを取ります。

  • open: シャドウルートに外部の JavaScript からアクセスできます。例えば、 Element.shadowRoot を使ってアクセスできます。
     
    element.shadowRoot; // ShadowRoot オブジェクトを返します
  • closed: シャドウルートに外部の JavaScript からアクセスできません。
     
    element.shadowRoot; // null を返します
    
delegatesFocus
真偽値で、 true に設定された場合、フォーカス可能性に関するカスタム要素の問題を緩和します。シャドウ DOM のフォーカスができない部分がクリックされた場合、最初のフォーカス可能な部分がフォーカスを得て、シャドウホストは :focus のスタイルを利用することができます。

返値

ShadowRoot オブジェクトです。

例外

例外 説明
InvalidStateError shadow root を追加しようとしている要素は、すでに shadow host です。
NotSupportedError shadow root を追加しようとしている要素は、HTML の名前空間外であるか、shadow DOM を持てない要素です(上記の通り)。

以下の例は word-count-web-component のデモを使用しています(実行例)。 attachShadow() はコードの真ん中付近で shadow root を作るために使用されています。その後カスタム要素を追加しています。

// Create a class for the element
class WordCount extends HTMLParagraphElement {
  constructor() {
    // Always call super first in constructor
    super();

    // count words in element's parent element
    var wcParent = this.parentNode;

    function countWords(node){
      var text = node.innerText || node.textContent
      return text.split(/\s+/g).length;
    }

    var count = 'Words: ' + countWords(wcParent);

    // Create a shadow root
    var shadow = this.attachShadow({mode: 'open'});

    // Create text node and add word count to it
    var text = document.createElement('span');
    text.textContent = count;

    // Append it to the shadow root
    shadow.appendChild(text);

    // Update count when element content changes
    setInterval(function() {
      var count = 'Words: ' + countWords(wcParent);
      text.textContent = count;
    }, 200)
  }
}

// Define the new element
customElements.define('word-count', WordCount, { extends: 'p' });

仕様書

仕様書 状態 備考
DOM
attachShadow() の定義
現行の標準

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
attachShadowChrome 完全対応 53Edge 完全対応 79Firefox 完全対応 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 完全対応 10WebView Android 完全対応 53Chrome Android 完全対応 53Firefox 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 完全対応 10Samsung Internet Android 完全対応 6.0
delegatesFocus option of ShadowRootInit dictionary.
実験的非標準
Chrome 完全対応 ありEdge 完全対応 79Firefox 未対応 なしIE 未対応 なしOpera ? Safari ? WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 未対応 なしOpera Android ? Safari iOS ? Samsung Internet Android 完全対応 あり

凡例

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