翻译不完整。 请帮助我们翻译这篇文章！
Element.attachShadow() 方法给指定的元素挂载一个Shadow DOM，并且返回它的 ShadowRoot.
可以附加 shadow DOM 的元素
要注意的是，不是每一种元素都可以吃下 shadow root 的。出于安全考虑，一些元素不能拥有 shadow DOM（比如 <a>），还有很多其他因素，下面是一个可以附加 shadow root 的元素的列表：
- 任何拥有有效的名称且可独立存在的（autonomous）自定义元素
<article><aside><blockquote><body><div><footer><h1><h2><h3><h4><h5><h6><header><main><nav><p><section><span>
语法
var shadowroot = element.attachShadow(shadowRootInit);
参数
shadowRootInit- 一个
ShadowRootInit字典，包括下列字段：mode-
一个指定 Shadow DOM 封装模式的字符串，可以是下列之一：
open指定为开放的封装模式。closed指定为关闭的封装模式。
delegatesFocus- A boolean that, when set to
true, specifies behavior that mitigates custom element issues around focusability. When a non-focusable part of the shadow DOM is clicked, the first focusable part is given focus, and the shadow host is given any available:focusstyling.
返回值
返回一个 ShadowRoot 对象或者 null。
异常
| 异常 | 说明 |
|---|---|
InvalidStateError |
The element you are trying to attach to is already a shadow host. |
NotSupportedError |
You are trying to attach a shadow root to an element outside the HTML namespace, or the element cannot have a shadow attached to it (see above). |
示例
The following example is taken from our word-count-web-component demo (see it live also). You can see that we use attachShadow() in the middle of the code to create a shadow root, which we then attach our custom element's contents to.
// 为新元素创建一个类
class WordCount extends HTMLParagraphElement {
constructor() {
// 在构造器中先调用一下 super
super();
// count words in element's parent element
var wcParent = this.parentNode;
function countWords(node){
var text = node.innerText || node.textContent
return text.trim().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);
}
}
// 定义新元素
customElements.define('word-count', WordCount, { extends: 'p' });
规范
| 标准 | 状态 | 备注 |
|---|---|---|
| DOM attachShadow() |
Living Standard |
浏览器兼容性
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
attachShadow | Chrome Full support 53 | Edge
No support
No
| Firefox
Full support
63
| IE No support No | Opera Full support 40 | Safari Full support 10 | WebView Android Full support 53 | Chrome Android Full support 53 | Firefox Android
Full support
63
| Opera Android Full support 41 | Safari iOS Full support 10 | Samsung Internet Android Full support 6.0 |
delegatesFocus option of ShadowRootInit dictionary. | Chrome Full support Yes | Edge No support No | Firefox No support No | IE No support No | Opera ? | Safari ? | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android No support No | Opera Android ? | Safari iOS ? | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.
- Non-standard. Expect poor cross-browser support.
- Non-standard. Expect poor cross-browser support.
- See implementation notes.
- See implementation notes.
- User must explicitly enable this feature.
- User must explicitly enable this feature.