javascripthtmlweb-componentshadow-dom

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

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
Solution

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

    Then get the host attribute:

    event.target.getRootNode().host