此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
Element.shadowRoot
Element.shadowRoot 是只读属性,表示元素挂载的 shadow root。可以使用 Element.attachShadow 给一个已存在的元素添加 shadow root。
值
可以是一个ShadowRoot实例对象,但如果一个 shadow root 的 mode被设置为 closed那么它的值将会是 null。(详情请见 Element.attachShadow ).
示例
下面代码片段取自 life-cycle-callbacks (在线查看), 在这个示例中我们创建了一个在元素属性中指定了大小和颜色的正方形元素。
在<custom-square>标签的 class 定义中我们在生命周期的回调函数里调用了一些外部方法——updateStyle(),正是这个函数使得我们添加的正方形元素可以改变大小和颜色。你可以看到我们将this(即我们创建的正方形元素本身)作为一个参数传入了这个方法。
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);
}
在updateStyle()函数中我们通过Element.shadowRoot获取到了 Shadow DOM 引用。在这里我们利用了标准的 DOM 遍历技巧来获取在 Shadow DOM 中<style>元素并更新了其中的 CSS 样式:
js
function updateStyle(elem) {
const shadow = elem.shadowRoot;
const childNodes = Array.from(shadow.childNodes);
childNodes.forEach((childNode) => {
if (childNode.nodeName === "STYLE") {
childNode.textContent = `
div {
width: ${elem.getAttribute("l")}px;
height: ${elem.getAttribute("l")}px;
background-color: ${elem.getAttribute("c")};
}
`;
}
});
}
规范
| 规范 |
|---|
| DOM # ref-for-dom-element-shadowroot1 |
浏览器兼容性
启用 JavaScript 以查看此浏览器兼容性表。