From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/api/element/attachshadow/index.html | 166 +++++++++++++++++++++++ 1 file changed, 166 insertions(+) create mode 100644 files/ja/web/api/element/attachshadow/index.html (limited to 'files/ja/web/api/element/attachshadow') diff --git a/files/ja/web/api/element/attachshadow/index.html b/files/ja/web/api/element/attachshadow/index.html new file mode 100644 index 0000000000..360211b65a --- /dev/null +++ b/files/ja/web/api/element/attachshadow/index.html @@ -0,0 +1,166 @@ +--- +title: Element.attachShadow() +slug: Web/API/Element/attachShadow +tags: + - API + - Element + - Method + - Reference + - attachShadow + - shadow dom + - メソッド +translation_of: Web/API/Element/attachShadow +--- +
{{APIRef('Shadow DOM')}}
+ +

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

+ +

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

+ +

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

+ + + +

構文

+ +
var shadowroot = element.attachShadow(shadowRootInit);
+
+ +

引数

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

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

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

返値

+ +

{{domxref("ShadowRoot")}} オブジェクトです。

+ +

例外

+ + + + + + + + + + + + + + + + + + +
例外説明
InvalidStateErrorshadow root を追加しようとしている要素は、すでに shadow host です。
NotSupportedErrorshadow 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' });
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('DOM WHATWG', '#dom-element-attachshadow', 'attachShadow()')}}{{Spec2('DOM WHATWG')}}
+ +

ブラウザーの互換性

+ + + +

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

-- cgit v1.2.3-54-g00ecf