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
– guest271314, Commented Dec 24, 2016 at 1:18

Gaurang Tandon · Accepted Answer · 2024-04-17 08:02:55Z

12

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

Then get the host attribute:

event.target.getRootNode().host

edited Apr 17, 2024 at 8:02

Gaurang Tandon

6,88911 gold badges52 silver badges96 bronze badges

answered Dec 24, 2016 at 2:13

Supersharp

31.5k11 gold badges105 silver badges149 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

darrylyeo Over a year ago

Perfect! I had a hunch it was a built-in; manually walking up the tree was much too cumbersome.

Oriol · Accepted Answer · 2016-12-24 01:41:09Z

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

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related