获取 Shadow DOM 根节点元素

Question

当将脚本插入元素的影子根时，是否有一种方法可以引用宿主元素？

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/

- Bart

Answer 1

Node.getRootNode()方法于2016年被引入。

现在您可以像这样访问宿主元素：

element.getRootNode().host

- darrylyeo

Answer 2

我终于搞清楚了。

根据规范（工作草案），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/

- Bart

---

你可以通过沿着DOM树向上遍历来访问影子根节点。但是，更好的方法是使用Node.getRootNode()。请参考下面的答案。 - Suraj Jain