initial commit

1 files changed, 166 insertions, 0 deletions

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
+---
+<div>{{APIRef('Shadow DOM')}}</div>
+
+<p><strong><code>Element.attachShadow()</code></strong> メソッドは、シャドウ DOM ツリーを特定の要素に追加し、そのシャドウルート ({{domxref("ShadowRoot")}}) への参照を返します。</p>
+
+<h2 id="Elements_you_can_attach_a_shadow_to" name="Elements_you_can_attach_a_shadow_to">シャドウツリーを追加できる要素</h2>
+
+<p>シャドウルートは全ての要素に追加できるわけではありません。 ({{htmlelement("a")}} など) セキュリティ上の理由でシャドウ DOM を持てないものもあります。以下にシャドウルートを追加<strong>できる</strong>要素を列挙します。</p>
+
+<ul>
+ <li>任意のカスタム要素で<a href="https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name">有効な名前</a>を持つもの</li>
+ <li>{{htmlelement("article")}}</li>
+ <li>{{htmlelement("aside")}}</li>
+ <li>{{htmlelement("blockquote")}}</li>
+ <li>{{htmlelement("body")}}</li>
+ <li>{{htmlelement("div")}}</li>
+ <li>{{htmlelement("footer")}}</li>
+ <li>{{htmlelement("h1")}}</li>
+ <li>{{htmlelement("h2")}}</li>
+ <li>{{htmlelement("h3")}}</li>
+ <li>{{htmlelement("h4")}}</li>
+ <li>{{htmlelement("h5")}}</li>
+ <li>{{htmlelement("h6")}}</li>
+ <li>{{htmlelement("header")}}</li>
+ <li>{{htmlelement("main")}}</li>
+ <li>{{htmlelement("nav")}}</li>
+ <li>{{htmlelement("p")}}</li>
+ <li>{{htmlelement("section")}}</li>
+ <li>{{htmlelement("span")}}</li>
+</ul>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">var <var>shadowroot</var> = <var>element</var>.attachShadow(<var>shadowRootInit</var>);
+</pre>
+
+<h3 id="Parameters" name="Parameters">引数</h3>
+
+<dl>
+ <dt><code><var>shadowRootInit</var></code></dt>
+ <dd><code>ShadowRootInit</code> ディクショナリで、以下のプロパティを含みます。
+ <dl>
+  <dt><code>mode</code></dt>
+  <dd>
+  <p>文字列で、シャドウ DOM ツリーの<em>カプセル化モード</em>を指定します。以下のうちの一つを取ります。</p>
+
+  <ul>
+   <li><code>open</code>: シャドウルートに外部の JavaScript からアクセスできます。例えば、 {{domxref("Element.shadowRoot")}} を使ってアクセスできます。<br>
+
+    <pre>element.shadowRoot; // ShadowRoot オブジェクトを返します</pre>
+   </li>
+   <li><code>closed</code>: シャドウルートに外部の JavaScript からアクセスできません。<br>
+
+    <pre>element.shadowRoot; // null を返します
+</pre>
+   </li>
+  </ul>
+  </dd>
+  <dt><code>delegatesFocus</code></dt>
+  <dd>真偽値で、 <code>true</code> に設定された場合、フォーカス可能性に関するカスタム要素の問題を緩和します。シャドウ DOM のフォーカスができない部分がクリックされた場合、最初のフォーカス可能な部分がフォーカスを得て、シャドウホストは <code>:focus</code> のスタイルを利用することができます。</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h3 id="Return_value" name="Return_value">返値</h3>
+
+<p>{{domxref("ShadowRoot")}} オブジェクトです。</p>
+
+<h3 id="Exceptions" name="Exceptions">例外</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">例外</th>
+   <th scope="col">説明</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>InvalidStateError</code></td>
+   <td>shadow root を追加しようとしている要素は、すでに shadow host です。</td>
+  </tr>
+  <tr>
+   <td><code>NotSupportedError</code></td>
+   <td>shadow root を追加しようとしている要素は、HTML の名前空間外であるか、shadow DOM を持てない要素です(上記の通り)。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>以下の例は <a href="https://github.com/mdn/web-components-examples/tree/master/word-count-web-component">word-count-web-component</a> のデモを使用しています(<a href="https://mdn.github.io/web-components-examples/word-count-web-component/">実行例</a>)。 <code>attachShadow()</code> はコードの真ん中付近で shadow root を作るために使用されています。その後カスタム要素を追加しています。</p>
+
+<pre class="brush: js">// 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' });</pre>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+   <th scope="col">備考</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-attachshadow', 'attachShadow()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("api.Element.attachShadow")}}</p>