blob: d2fcdbf0df9a1c0f4de2fbd7e7cfa5798753c172 (
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
|
---
title: Element.attachShadow()
slug: Web/API/Element/attachShadow
translation_of: Web/API/Element/attachShadow
---
<p>{{APIRef('Shadow DOM')}} {{SeeCompatTable}}</p>
<p>Метод <strong><code>Element.attachShadow()</code></strong> добавляет<span id="result_box" lang="ru"><span> теневое DOM дерево к указанному элементу и возвращает ссылку на его </span></span><a href="https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot" title="Use Element.attachShadow to create an instance of shadow DOM. When shadow DOM is created, it is always attached to an existing element. After the shadow DOM is created, the element that it is attached to is called the shadow root."><code>ShadowRoot</code></a>( корневой элемент созданного дерева).</p>
<h4 id="Элементы_которые_можно_добавить_в_теневой_DOM">Элементы которые можно добавить в теневой DOM</h4>
<p>Обратите внимание, что не каждый элемент можно добавить в корень теневого дерева. Некоторые типы исключены по соображениям безопасности(например {{htmlelement("a")}}), и некоторые другие. Вот список разрешённых элементов:</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 <em>shadowroot =</em><em> element</em>.attachShadow(<em>shadowRootInit</em>);
</pre>
<h3 id="Параметры">Параметры</h3>
<dl>
<dt><code>shadowRootInit</code></dt>
<dd><code>ShadowRootInit</code> содержит следующие поля:
<p><code>mode</code>: Строка указывающая на режим инкапсуляции для shadowDOM:</p>
<ul>
<li><code>open. </code>Указывает на открытие режима инкапсуляции.<br>
Это означает что элементы shadowRoot доступны для внешнего мира <em>element.shadowRoot</em><br>
<pre>element.shadowRoot === shadowroot; // returns true</pre>
</li>
<li><code>closed.</code> Указывает на закрытие режима инкапсуляции.<br>
Этот режим запрещает доступ к узлам node(s) и закрывать теневой корень для внешнего мира<br>
<pre>element.shadowRoot === shadowroot; // returns false
element.shadowRoot === null; // returns true
</pre>
</li>
</ul>
</dd>
</dl>
<h3 id="Возвращает">Возвращает</h3>
<p>Вернёт a {{domxref("ShadowRoot")}} или null.</p>
<h3 id="Исключения">Исключения</h3>
<table class="standard-table">
<tbody>
<tr>
<td>Исключение</td>
<td>Описание</td>
</tr>
<tr>
<td>InvalidStateError</td>
<td>Элемент уже является хостом теневого DOM</td>
</tr>
<tr>
<td>NotSupportedError</td>
<td>Вы пытаетесь прикрепить shadow DOM к HTML элементу с некорректным именем, или к запрещённому элементу. (см. выше)</td>
</tr>
</tbody>
</table>
<h2 id="Примеры">Примеры</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/">live demo</a>. Вы можете найти метод attachShadow() примерно в середине кода. Метод создаёт корневой элемент теневого DOM к которому потом добавляется содержимое шаблона элемента.</p>
<pre class="brush: js"><code>//Create a class for the element
class WordCount extends HTMLParagraphElement {
constructor() {
// Always call super first in constructor
super();</code>
// 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="Спецификации">Спецификации</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('DOM WHATWG', '#dom-element-attachshadow', 'attachShadow()')}}</td>
<td>{{Spec2('DOM WHATWG')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
<p>{{Compat("api.Element.attachShadow")}}</p>
<div id="compat-mobile"> </div>
|
