获取影子根主机元素

Get shadow root host element

本文关键字：元素 主机 影子 获取      更新时间：2023-09-26

在元素的影子根中插入脚本时，是否有办法引用宿主元素?

var element = document.createElement('div');
var script = document.createElement('script');
script.innerHTML = 'console.log(host)'; // << How to get host element??
var shadow = element.createShadowRoot();
shadow.appendChild(script);
document.body.appendChild(element);
http://jsfiddle.net/9b1vyu4n/

Node.getRootNode()于2016年推出。

你现在可以像这样访问host元素:

element.getRootNode().host

我终于弄明白了。

根据规范(工作草案)，ShadowRoot具有称为host的只读属性。http://www.w3.org/TR/shadow-dom/shadowroot-object 

interface ShadowRoot : DocumentFragment {
    ...
    readonly    attribute Element        host;
    ...
};

你可以通过沿着DOM树走到影子根目录

while(e.nodeType != 11) { // 11 = DOCUMENT_FRAGMENT_NODE
    e = e.parentNode;
}
var hostElement = e.host

在我的例子中，它更简单，因为影子根是脚本本身的父节点。

document.currentScript.parentNode.host
http://jsfiddle.net/9b1vyu4n/2/

相关文章：