[英]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 (ie given a reference to either
element2
or element3
, get the reference to element1
)? 有没有一种方法可以实现这一点,无论元素在树中的位置(即给定对
element2
或element3
的引用,获取对element1
的引用)?
element1
└ #shadow-root
└ element2
└ element3
For Shadow DOM v1, you may use the getRootNode()
method. 对于Shadow DOM v1,您可以使用
getRootNode()
方法。
Then get the host
attribute: 然后获取
host
属性:
event.target.getRootNode().host
You can keep iterating parentNode
until you get the shadow root, and then get host
. 您可以继续迭代
parentNode
直到获得影子根,然后获取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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.