From 035535ba507b9e36b058bd9843242e1bcbda1be3 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 18 Jan 2022 21:57:08 +0900 Subject: ウェブコンポーネント関係の Web API の記事を移行 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/element/attachshadow/index.html | 164 ----------------------- files/ja/web/api/element/attachshadow/index.md | 164 +++++++++++++++++++++++ 2 files changed, 164 insertions(+), 164 deletions(-) delete mode 100644 files/ja/web/api/element/attachshadow/index.html create mode 100644 files/ja/web/api/element/attachshadow/index.md (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 deleted file mode 100644 index 6237554ad3..0000000000 --- a/files/ja/web/api/element/attachshadow/index.html +++ /dev/null @@ -1,164 +0,0 @@ ---- -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")}}

diff --git a/files/ja/web/api/element/attachshadow/index.md b/files/ja/web/api/element/attachshadow/index.md new file mode 100644 index 0000000000..6237554ad3 --- /dev/null +++ b/files/ja/web/api/element/attachshadow/index.md @@ -0,0 +1,164 @@ +--- +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