ShadowRoot
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Shadow DOM API 的 ShadowRoot
接口是一个 DOM 子树的根节点,它与文档的主 DOM 树分开渲染。
你可以通过使用一个元素的 Element.shadowRoot
属性来检索它的参考,假设它是由 Element.attachShadow()
创建的并使 mode
设置为 open
.
属性
ShadowRoot.delegatesFocus
只读 非标准-
返回一个 boolean 值表明在 shadow 添加时 delegatesFocus 是否被设置 (see
Element.attachShadow()
) ShadowRoot.host
只读-
ShadowRoot
附加的宿主 DOM 元素。 ShadowRoot.innerHTML
-
ShadowRoot
内部的 DOM 树。 ShadowRoot.mode
只读-
ShadowRoot
的模式——可以是open
或者closed
。这定义了 shadow root 的内部实现是否可被 JavaScript 访问及修改 — 也就是说,该实现是否公开,例如,<video>
标签内部实现无法被 JavaScript 访问及修改。
从 DocumentOrShadowRoot 中包含的属性
ShadowRoot
接口包含了下列从DocumentOrShadowRoot
mixin 中定义的属性。请注意它现在仅在 Chrome 浏览器中应用; 其他的浏览器仍在Document
接口实现。
DocumentOrShadowRoot.activeElement
只读-
返回含有获取焦点了的 shadow tree 的
Element
DocumentOrShadowRoot.styleSheets
只读-
返回
CSSStyleSheet
的StyleSheetList
对象,用于代表通过链接加载到文档中或内嵌的样式表。
方法
ShadowRoot
接口包含了下列几个在 DocumentOrShadowRoot
mixin 中定义的方法。请注意它现在仅在 Chrome 浏览器中应用; 其他的浏览器仍在Document
接口实现。
DocumentOrShadowRoot.getSelection()
-
返回一个
Selection
类来表明用户选择的文本选区或者光标所在的位置 DocumentOrShadowRoot.elementFromPoint()
-
返回在指定坐标最上层的元素。
DocumentOrShadowRoot.elementsFromPoint()
-
返回一个包含所有在指定位置上的元素的 Array
DocumentOrShadowRoot.caretPositionFromPoint()
-
返回一个
CaretPosition
对象,包括包含了光标的 DOM 节点,以及光标在该节点中的字符偏移量
例子
下面的这段代码是从我们的 life-cycle-callbacks 示例 (查看在线示例) 中提取出来的,它创建了一个由元素的属性指定的大小相等的正方形。
Inside the <custom-square>
element's class definition we include some life cycle callbacks that make a call to an external function, upateStyle()
, which actually applies the size and color to the element. You'll see that we are passing it this
(the custom element itself) as a parameter.
connectedCallback() {
console.log('Custom square element added to page.');
updateStyle(this);
}
attributeChangedCallback(name, oldValue, newValue) {
console.log('Custom square element attributes changed.');
updateStyle(this);
}
In the updateStyle()
function itself, we get a reference to the shadow DOM using Element.shadowRoot
. From here we use standard DOM traversal techniques to find the <style>
element inside the shadow DOM and then update the CSS found inside it:
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") +
";" +
"}";
}
}
}
规范
Specification |
---|
DOM Standard # interface-shadowroot |
浏览器兼容性
BCD tables only load in the browser