獲取shadow root主機元素

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/

Answer 1

我終於弄清楚了。

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

Answer 2

Node.getRootNode()於2016年推出。

您現在可以像這樣訪問主機元素：

element.getRootNode().host