28

When inserting a script into the shadow root of an element is there a way to refer to the host element?

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/

2 Answers 2

59

Node.getRootNode() was introduced in 2016.

You can now access the host element like so:

element.getRootNode().host
30

I got this finally figured out.

According to the specification (working draft) a ShadowRoot has a read only property called host. http://www.w3.org/TR/shadow-dom/#shadowroot-object

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

You can get to the shadow root by walking up the DOM tree.

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

In my case it was simpler since the shadow root was the parent node of the script itself.

document.currentScript.parentNode.host

http://jsfiddle.net/9b1vyu4n/2/

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.