blob: 360211b65ae9ba17bacc87911ae130a3542d3bf9 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
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>
|
