From 548d81890593da8cc9df7e3758645d79c8ff5e5b Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 18 Jan 2022 23:52:57 +0900 Subject: 2021/09/15 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/element/attachshadow/index.md | 220 +++++++++++-------------- 1 file changed, 98 insertions(+), 122 deletions(-) (limited to 'files/ja/web/api') diff --git a/files/ja/web/api/element/attachshadow/index.md b/files/ja/web/api/element/attachshadow/index.md index 6237554ad3..e560d75eae 100644 --- a/files/ja/web/api/element/attachshadow/index.md +++ b/files/ja/web/api/element/attachshadow/index.md @@ -4,106 +4,92 @@ slug: Web/API/Element/attachShadow tags: - API - Element - - Method - - Reference - - attachShadow - - shadow dom - メソッド + - リファレンス + - attachShadow + - シャドウ DOM +browser-compat: api.Element.attachShadow 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
+{{APIRef('Shadow DOM')}}
+
+**`Element.attachShadow()`** メソッドは、シャドウ DOM ツリーを特定の要素に追加し、そのシャドウルート ({{domxref("ShadowRoot")}}) への参照を返します。
+
+## シャドウツリーを追加できる要素
+
+シャドウルートはすべての要素に追加できるわけではありません。セキュリティ上の理由でシャドウ DOM を持てないものもあります（{{htmlelement("a")}} など）。
+
+以下にシャドウルートを追加**できる**要素を列挙します。
+
+- 任意の自律カスタム要素で[有効な名前](https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name)を持つもの
+- {{htmlelement("article")}}
+- {{htmlelement("aside")}}
+- {{htmlelement("blockquote")}}
+- {{htmlelement("body")}}
+- {{htmlelement("div")}}
+- {{htmlelement("footer")}}
+- {{htmlelement("h1")}}
+- {{htmlelement("h2")}}
+- {{htmlelement("h3")}}
+- {{htmlelement("h4")}}
+- {{htmlelement("h5")}}
+- {{htmlelement("h6")}}
+- {{htmlelement("header")}}
+- {{htmlelement("main")}}
+- {{htmlelement("nav")}}
+- {{htmlelement("p")}}
+- {{htmlelement("section")}}
+- {{htmlelement("span")}}
+
+## 構文
+
+```js
+attachShadow(init)
+```
+
+### 引数
+
+- `init`
+
+  - : 以下のフィールドを含むオブジェクトです。
+
+    - `mode`
+
+      - : 文字列で、シャドウ DOM ツリーの*カプセル化モード*を指定します。以下のうちの一つを取ります。
+
+        - `open`: シャドウルートの要素には、例えば {{domxref("Element.shadowRoot")}} を使用して、ルートの外部の JavaScript からアクセスできます。
+
+          ```js
+          element.shadowRoot; // ShadowRoot オブジェクトを返す
+          ```
+
+        - `closed`: 閉じたシャドウルートに対する外部の JavaScript からのアクセスを拒否します。
+
+          ```js
+          element.shadowRoot; // null を返す
+          ```
+
+    - `delegatesFocus`
+      - : 論理値で、 `true` に設定された場合、フォーカス可能性に関するカスタム要素の問題を緩和します。シャドウ DOM のフォーカスができない部分がクリックされた場合、最初のフォーカス可能な部分がフォーカスを得て、シャドウホストは `:focus` のスタイルを利用することができます。
+
+### 返値
+
+{{domxref("ShadowRoot")}} オブジェクトです。
+
+### 例外
+
+- `InvalidStateError`
+  - : 取り付けようとしている要素が既にシャドウホストである場合。
+- `NotSupportedError`
+  - : シャドウルートを HTML 名前空間外の要素に取り付けようとした場合、シャドウを取り付けられない要素であった場合、要素の定義で静的プロパティ `disabledFeatures` が `"shadow"` の値であった場合。
+
+## 例
+
+以下の例は [word-count-web-component](https://github.com/mdn/web-components-examples/tree/master/word-count-web-component) のデモを使用しています([実行例](https://mdn.github.io/web-components-examples/word-count-web-component/))。 
+コードの途中で `attachShadow()` を使ってシャドウルートを作成し、そこにカスタム要素の中身を取り付けているのがわかると思います。
+
+```js
+// Create a class for the element
 class WordCount extends HTMLParagraphElement {
   constructor() {
     // Always call super first in constructor
@@ -114,7 +100,7 @@ class WordCount extends HTMLParagraphElement {
 
     function countWords(node){
       var text = node.innerText || node.textContent
-      return text.split(/\s+/g).length;
+      return text.trim().split(/\s+/g).length;
     }
 
     var count = 'Words: ' + countWords(wcParent);
@@ -138,27 +124,17 @@ class WordCount extends HTMLParagraphElement {
 }
 
 // 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")}}

+customElements.define('word-count', WordCount, { extends: 'p' }); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("ShadowRoot.delegatesFocus")}} -- cgit v1.2.3-54-g00ecf