How to access host element from within the shadow root using Shadow DOM v1?

Question

Given an element contained in a shadow root, how can I get to the element that hosts the said shadow root? Is there a single way to accomplish this regardless of where an element is in the tree (i.e. given a reference to either element2 or element3, get the reference to element1)?

element1
└ #shadow-root
  └ element2
    └ element3

Can you include `html`, and the `javascript` that you have tried at Question? — guest271314, Dec 24 '16 at 01:18

score 12 · Accepted Answer · answered Dec 24 '16 at 02:13

12

For Shadow DOM v1, you may use the getRootNode() method.

Then get the host attribute:

event.target.getRootNode().host

answered Dec 24 '16 at 02:13

Supersharp

29,002
9
92
134

1

Perfect! I had a hunch it was a built-in; manually walking up the tree was much too cumbersome. – darrylyeo Dec 24 '16 at 03:42

score 0 · Answer 2 · answered Dec 24 '16 at 01:41

You can keep iterating parentNode until you get the shadow root, and then get host.

function getHostElement(el) {
  while (el.parentNode) el = el.parentNode;
  return getShadowRoot(el).host;
}
var element1 = document.createElement('element1');
var element2 = document.createElement('element2');
var element3 = document.createElement('element3');
element2.appendChild(element3);
var shadowRoot = element1.createShadowRoot();
shadowRoot.appendChild(element2);
getHostElement(element3); // element1

How to access host element from within the shadow root using Shadow DOM v1?

2 Answers2

Linked

Related