如何使用Shadow DOM v1從影子根目錄中訪問主機元素？

Question

給定一個包含在影子根目錄中的元素，我怎樣才能到達承載所述影子根目錄的元素？有沒有一種方法可以實現這一點，而不管元素在樹中的哪個位置（即給定參考element2或element3，獲得參考element1）？

element1 
└ #shadow-root 
    └ element2 
    └ element3 

Answer 1

對於Shadow DOM v1，您可以使用getRootNode()方法。

然後得到host屬性：

event.target.getRootNode().host 

Answer 2

你可以繼續迭代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