DocumentOrShadowRoot - 提供在文档和影子根节点之间共享的 API
这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
DocumentOrShadowRoot 是 Shadow DOM API 的接口,mixin 了提供在文档和影子根节点之间共享的 API。 Document 和 ShadowRoot 中包含以下功能。
属性
DocumentOrShadowRoot.activeElement只读
返回具有焦点的阴影树中的 Element。
DocumentOrShadowRoot.fullscreenElement只读
返回该文档当前处于全屏模式的 Element。
DocumentOrShadowRoot.pointerLockElement 只读
在指针被锁定时,返回元素集作为鼠标事件的目标。如果锁定挂起,指针解锁或目标位于另一个文档中,则返回 null。
DocumentOrShadowRoot.styleSheets只读
返回明确链接到文档中或嵌入文档中的样式表的 CSSStyleSheet 对象的 StyleSheetList。
方法
DocumentOrShadowRoot.getSelection()
返回表示用户选择的文本范围的 Selection 对象,或者插入符号的当前位置。
DocumentOrShadowRoot.elementFromPoint()
返回指定坐标处的最顶层元素。
DocumentOrShadowRoot.elementsFromPoint()
返回指定坐标处的所有元素的数组。
DocumentOrShadowRoot.caretPositionFromPoint()
返回一个 CaretPosition 对象,其中包含包含插入符号的 DOM 节点,以及该节点内插入符号的字符偏移量。
规范
| 规范 | 状态 | 备注 |
|---|---|---|
| DOM DocumentOrShadowRoot 的定义 |
现行的标准 | 初始定义。 |
| Shadow DOM DocumentOrShadowRoot 的定义 |
编者的草案 | Shadow DOM 的实现。 |
桌面浏览器兼容性
| 特性 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| 基础支持 | 53 | 支持 | 支持 | 支持 | 40 | 支持 |
activeElement |
53 | 支持 | 支持 | 支持 | 40 | 支持 |
styleSheets |
53 | 支持 | 支持 | 支持 | 40 | 支持 |
getSelection |
53 | 支持 | 支持 | 支持 | 40 | 支持 |
elementFromPoint |
53 | 支持 | 支持 | 支持 | 40 | 支持 |
elementsFromPoint |
53 | 支持 | 支持 | 支持 | 40 | 支持 |
caretPositionFromPoint |
不支持 | 支持 | 支持 | 支持 | 不支持 | 支持 |
pointerLockElement |
53 | 支持 | 支持 | 支持 | 40 | 支持 |
fullscreenElement |
531 | 支持2 |
93 47 |
支持 | 40 | 支持 |
移动浏览器兼容性
| 特性 | Android | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
|---|---|---|---|---|---|---|---|
| 基础支持 | 53 | 53 | 支持 | 支持 | 未知 | 40 | 支持 |
activeElement |
53 | 53 | 支持 | 支持 | 未知 | 40 | 支持 |
styleSheets |
53 | 53 | 支持 | 支持 | 未知 | 40 | 支持 |
getSelection |
53 | 53 | 支持 | 支持 | 未知 | 40 | 支持 |
elementFromPoint |
53 | 53 | 支持 | 支持 | 未知 | 40 | 支持 |
elementsFromPoint |
53 | 53 | 支持 | 支持 | 未知 | 40 | 支持 |
caretPositionFromPoint |
不支持 | 不支持 | 支持 | 支持 | 未知 | 不支持 | 支持 |
pointerLockElement |
53 | 53 | 支持 | 支持 | 未知 | 40 | 支持 |
fullscreenElement |
53 | 53 | 支持 |
93 47 |
未知 | 40 | 支持 |
1. 通过 webkitFullscreenElement 支持。
2. 通过 msFullscreenElement 支持。
3. 通过 mozFullScreenElement 支持。
[1] 该接口的功能仍在 Document 对象上实现。