blob: 42ba338cb314d97f787c5f7bb210a16f0dcb895c (
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
|
---
title: ShadowRoot
slug: Web/API/ShadowRoot
tags:
- API
- Interface
- Reference
- ShadowRoot
- Web Components
translation_of: Web/API/ShadowRoot
---
<p>{{APIRef('Shadow DOM')}}</p>
<p>Shadow DOM API 的 <code><strong>ShadowRoot</strong></code> 接口是一个 DOM 子树的根节点, 它与文档的主 DOM 树分开渲染。</p>
<p>你可以通过使用一个元素的 {{domxref("Element.shadowRoot")}} 属性来检索它的参考,假设它是由 {{domxref("Element.attachShadow()")}} 创建的并使 <code>mode</code> 设置为 <code>open</code>.</p>
<h2 id="属性">属性</h2>
<dl>
<dt>{{domxref("ShadowRoot.delegatesFocus")}} {{readonlyinline}} {{non-standard_inline}}</dt>
<dd>返回一个boolean值表明在 shadow 添加时 delegatesFocus 是否被设置(see {{domxref("Element.attachShadow()")}})</dd>
<dt>{{domxref("ShadowRoot.host")}} {{readonlyinline}}</dt>
<dd><code>ShadowRoot</code> 附加的宿主 DOM 元素。</dd>
<dt>{{domxref("ShadowRoot.innerHTML")}}</dt>
<dd><code>ShadowRoot</code> 内部的 DOM 树。</dd>
<dt>{{domxref("ShadowRoot.mode")}} {{readonlyinline}}</dt>
<dd><code>ShadowRoot</code> 的模式——可以是 <code>open</code> 或者 <code>closed</code>。这定义了 shadow root 的内部实现是否可被 JavaScript 访问及修改 — 也就是说，该实现是否公开，例如，{{HTMLElement("video")}} 标签内部实现无法被 JavaScript 访问及修改。</dd>
</dl>
<h3 id="从_DocumentOrShadowRoot_中包含的属性">从 DocumentOrShadowRoot 中包含的属性</h3>
<p><em><code>ShadowRoot</code> 接口包含了下列从{{domxref("DocumentOrShadowRoot")}} mixin中定义的属性. 请注意它现在仅在Chrome浏览器中应用; 其它的浏览器仍在{{domxref("Document")}}接口实现.</em></p>
<dl>
<dt>{{domxref("DocumentOrShadowRoot.activeElement")}} {{readonlyInline}}</dt>
<dd>返回含有获取焦点了的shadow tree的 {{domxref('Element')}} </dd>
<dt>{{domxref("DocumentOrShadowRoot.styleSheets")}} {{readonlyInline}}</dt>
<dd>返回 {{domxref('CSSStyleSheet')}} 的 {{domxref('StyleSheetList')}} 对象，用于代表通过链接加载到文档中或内嵌的样式表。</dd>
</dl>
<h2 id="方法">方法</h2>
<p><em> <code>ShadowRoot</code> 接口包含了下列几个在 {{domxref("DocumentOrShadowRoot")}} mixin中定义的方法. 请注意它现在仅在Chrome浏览器中应用; 其它的浏览器仍在{{domxref("Document")}}接口实现.</em></p>
<dl>
<dt>{{domxref("DocumentOrShadowRoot.getSelection()")}}</dt>
<dd>返回一个 {{domxref('Selection')}} 类来表明用户选择的文本选区或者光标所在的位置</dd>
<dt>{{domxref("DocumentOrShadowRoot.elementFromPoint()")}}</dt>
<dd>返回在指定坐标最上层的元素.</dd>
<dt>{{domxref("DocumentOrShadowRoot.elementsFromPoint()")}}</dt>
<dd>返回一个包含所有在指定位置上的元素的Array</dd>
<dt>{{domxref("DocumentOrShadowRoot.caretPositionFromPoint()")}}</dt>
<dd>返回一个 {{domxref('CaretPosition')}} 对象，包括包含了光标的DOM节点，以及光标在该节点中的字符偏移量</dd>
</dl>
<h2 id="例子">例子</h2>
<p>下面的这段代码是从我们的 <a href="https://github.com/mdn/web-components-examples/tree/master/life-cycle-callbacks">life-cycle-callbacks</a> 示例 (<a href="https://mdn.github.io/web-components-examples/life-cycle-callbacks">查看在线示例</a>)中提取出来的, 它创建了一个由元素的属性指定的大小相等的正方形.</p>
<p>Inside the <code><custom-square></code> element's class definition we include some life cycle callbacks that make a call to an external function, <code>upateStyle()</code>, which actually applies the size and color to the element. You'll see that we are passing it <code>this</code> (the custom element itself) as a parameter.</p>
<pre class="brush: js">connectedCallback() {
console.log('Custom square element added to page.');
updateStyle(this);
}
attributeChangedCallback(name, oldValue, newValue) {
console.log('Custom square element attributes changed.');
updateStyle(this);
}</pre>
<p>In the <code>updateStyle()</code> function itself, we get a reference to the shadow DOM using {{domxref("Element.shadowRoot")}}. From here we use standard DOM traversal techniques to find the {{htmlelement("style")}} element inside the shadow DOM and then update the CSS found inside it:</p>
<pre class="brush: js">function updateStyle(elem) {
var shadow = elem.shadowRoot;
var childNodes = shadow.childNodes;
for(var i = 0; i < childNodes.length; i++) {
if(childNodes[i].nodeName === 'STYLE') {
childNodes[i].textContent =
'div {' +
'width: ' + elem.getAttribute('l') + 'px;' +
'height: ' + elem.getAttribute('l') + 'px;' +
'background-color: ' + elem.getAttribute('c') + ';' +
'}';
}
}
}</pre>
<h2 id="规范">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('DOM WHATWG','#interface-shadowroot','Interface ShadowRoot')}}</td>
<td>{{Spec2('DOM WHATWG')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{Compat("api.ShadowRoot")}}</p>
|
