如何使用 Shadow DOM v1 从影子根中访问宿主元素？答案

【问题标题】：How to access host element from within the shadow root using Shadow DOM v1?如何使用 Shadow DOM v1 从影子根中访问宿主元素？
【发布时间】：2023-03-11 08:24:03
【问题描述】：

给定一个包含在影子根中的元素，我如何才能找到承载所述影子根的元素？无论元素在树中的哪个位置，是否有一种方法可以完成此操作（即，给定对element2 或element3 的引用，获取对element1 的引用）？

element1
└ #shadow-root
  └ element2
    └ element3

【问题讨论】：

您能否将html 和您在Question 中尝试过的javascript 包括在内？
反对者愿意解释一下吗？

标签： javascript html web-component shadow-dom

【解决方案1】：

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

然后获取host属性：

event.target.getRootNode().host

【讨论】：

完美！我有一种预感，它是内置的；手动上树太麻烦了。

【解决方案2】：

你可以继续迭代@987654321@直到你得到影子根，然后得到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

【讨论】：