この記事は翻訳作業中です。

Element.attachShadow() メソッドは shadow DOM ツリーを特定の要素に追加し、その ShadowRoot を返します。

Elements you can attach a shadow to

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

 

Syntax

var shadowroot = element.attachShadow(shadowRootInit); 

パラメータ

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

mode: shadow DOM ツリーのカプセル化のモードを指定する文字列。以下の2つの値を取ります。

  • open: shadow root に外部の JavaScript からアクセスできます。例えば、 Element.shadowRoot を使ってアクセスできます。
     
    element.shadowRoot; // ShadowRoot obj を返します
  • closed: shadow root に外部の JavaScript からアクセスできません。
     
    element.shadowRoot; // null を返します
    

戻り値

ShadowRoot object または null

例外

例外 説明
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 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 53Edge 未対応 なし
補足
未対応 なし
補足
補足 Under consideration
Firefox 完全対応 63
完全対応 63
完全対応 59
補足 無効
補足 See bug 1205323
無効 From version 59: 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 完全対応 53Edge Mobile 未対応 なし
補足
未対応 なし
補足
補足 Under consideration
Firefox Android 完全対応 63
完全対応 63
完全対応 59
補足 無効
補足 See bug 1205323
無効 From version 59: 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 完全対応 40Safari iOS 完全対応 10Samsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

ドキュメントのタグと貢献者

このページの貢献者: elkurin
最終更新者: elkurin,