如何使用 Shadow DOM v1 从 shadow root 访问宿主元素？

Question

给定影子根中包含的元素，我如何才能找到承载所述影子根的元素？是否有一种方法可以实现这一点，而不管元素在树中的位置（即给出对 element2 或 element3 的引用，获取对 element1 的引用）？

element1
└ #shadow-root
  └ element2
    └ element3

Answer 1

你可以继续迭代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

Answer 2

对于 Shadow DOM v1，您可以使用 getRootNode() 方法。

然后获取host属性：

event.target.getRootNode().host

如何使用 Shadow DOM v1 从 shadow root 访问宿主元素？

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

html

javascript

web-component

shadow-dom