获取影子根宿主元素答案

【问题标题】：Get shadow root host element获取影子根宿主元素
【发布时间】：2014-10-09 23:41:01
【问题描述】：

将脚本插入到元素的影子根中时，有没有办法引用宿主元素？

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/

【问题讨论】：

标签： javascript html google-chrome shadow-dom

【解决方案1】：

Node.getRootNode() 于 2016 年推出。

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

element.getRootNode().host

【讨论】：

【解决方案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/

【讨论】：

"你可以通过 DOM 树向上到达影子根。" , 而不是这个使用 Node.getRootNode()。请参阅下面的答案。