此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
Element.attachShadow()
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年1月.
* Some parts of this feature may have varying levels of support.
Element.attachShadow() 方法给指定的元素挂载一个 Shadow DOM,并且返回对 ShadowRoot 的引用。
可以被挂载的 shadow DOM 元素
要注意的是,不是每一种类型的元素都可以附加到 shadow root(影子根)下面。出于安全考虑,一些元素不能使用 shadow DOM(例如<a>),以及许多其他的元素。下面是一个可以挂载 shadow root 的元素列表:
语法
js
attachShadow(options)
参数
options-
一个包括下列字段的对象:
mode-
指定 Shadow DOM 树封装模式的字符串,可以是以下值:
openshadow root 元素可以从 js 外部访问根节点,例如使用Element.shadowRoot:
jselement.attachShadow({ mode: "open" }); element.shadowRoot; // 返回一个 ShadowRoot 对象closed拒绝从 js 外部访问关闭的 shadow root 节点
jselement.attachShadow({ mode: "closed" }); element.shadowRoot; // 返回 null delegatesFocus可选-
一个布尔值,当设置为
true时,指定减轻自定义元素的聚焦性能问题行为。当 shadow DOM 中不可聚焦的部分被点击时,让第一个可聚焦的部分成为焦点,并且 shadow host(影子主机)将提供所有可用的:focus样式。
返回值
返回一个 ShadowRoot 对象或者 null。
异常
| 异常 | 说明 |
|---|---|
InvalidStateError 无效状态错误 |
你添加的元素已经是一个 shadow host(影子主机). |
NotSupportedError 不被支持错误 |
你应该添加 HTML 元素的命名空间之外的 shadow root,或者这个元素不能有其他 shadow 挂载到它上面 (见上). |
示例
下面的例子取至 word-count-web-component 片段 ( 现场看看 ). 你可以看到使用 attachShadow() 在代码中间创建一个 shadow root,然后我们可以将自定义元素的内容挂载添加到它上面。
js
// 为新元素创建一个类
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" });
规范
| Specification |
|---|
| DOM # dom-element-attachshadow |
浏览器兼容性
Loading...