Element.attachShadow()
Element.attachShadow()
方法给指定的元素挂载一个Shadow DOM,并且返回对 ShadowRoot
的引用。
可以被挂载的shadow DOM元素
要注意的是,不是每一种类型的元素都可以附加到shadow root(影子根)下面。出于安全考虑,一些元素不能使用 shadow DOM(例如<a>
),以及许多其他的元素。下面是一个可以挂载 shadow root 的元素列表:
- 任何带有有效的名称且可独立存在的(autonomous)自定义元素
<article>
<aside>
<blockquote>
<body>
<div>
<footer>
<h1>
(en-US)<h2>
(en-US)<h3>
(en-US)<h4>
(en-US)<h5>
(en-US)<h6>
(en-US)<header>
<main>
<nav>
<p>
<section>
<span>
语法
var shadowroot = element.attachShadow(shadowRootInit);
参数
shadowRootInit
- 一个
ShadowRootInit
字典,包括下列字段:mode 模式
-
指定 Shadow DOM 树封装模式的字符串,可以是以下值:
open
shadow root元素可以从js外部访问根节点,例如使用Element.shadowRoot
:
element.shadowRoot; // 返回一个ShadowRoot对象
closed
拒绝从js外部访问关闭的shadow root节点
element.shadowRoot; // 返回null
delegatesFocus 焦点委托
- 一个布尔值, 当设置为
true
时, 指定减轻自定义元素的聚焦性能问题行为.
当shadow DOM中不可聚焦的部分被点击时, 让第一个可聚焦的部分成为焦点, 并且shadow host(影子主机)将提供所有可用的:focus
样式.
返回值
返回一个 ShadowRoot
对象或者 null
。
异常
异常 | 说明 |
---|---|
InvalidStateError |
您添加的元素已经是一个shadow host(影子主机). |
|
您应该添加 HTML 元素的命名空间之外的shadow root, 或者这个元素不能有其他shadow挂载到它上面 (见上). |
示例
下面的例子取至 word-count-web-component 片段( 现场看看 ). 你可以看到使用 attachShadow()
在代码中间创建一个shadow root, 然后我们可以将自定义元素的内容挂载添加到它上面。
// 为新元素创建一个类
class WordCount extends HTMLParagraphElement {
constructor() {
// 在构造器中先调用一下 super
super();
// 计数器指向元素的父级
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);
// 创建一个shadow root
var shadow = this.attachShadow({mode: 'open'});
// 创建文本节点并向其添加计数器
var text = document.createElement('span');
text.textContent = count;
// 将其添加到shadow root上
shadow.appendChild(text);
// 当元素内容发生变化时更新计数
setInterval(function() {
var count = 'Words: ' + countWords(wcParent);
text.textContent = count;
}, 200);
}
}
// 定义新元素
customElements.define('word-count', WordCount, { extends: 'p' });
规范
标准 | 状态 | 备注 |
---|---|---|
DOM attachShadow() |
Living Standard |
浏览器兼容性
BCD tables only load in the browser