この翻訳は不完全です。英語から この記事を翻訳 してください。

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 — 65
無効
無効 From version 59 until version 65 (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 完全対応 53Edge Mobile 未対応 なし
補足
未対応 なし
補足
補足 Under consideration
Firefox Android 完全対応 63
完全対応 63
未対応 59 — 65
無効
無効 From version 59 until version 65 (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 完全対応 40Safari iOS 完全対応 10Samsung Internet Android ?

凡例

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

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

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