25

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

50

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/

1
  • 2
    "You can get to the shadow root by walking up the DOM tree." , Instead of this use Node.getRootNode(). See Below Answer.
    – Suraj Jain
    Apr 27, 2018 at 19:11

Your Answer

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

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