Get shadow root host element

javascript html google-chrome shadow-dom

Node.getRootNode() was introduced in 2016.

You can now access the host element like so:

element.getRootNode().host

javascript html google-chrome shadow-dom

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

CodeHunter