web-dev-qa-db-ja.com

シャドウルートのホスト要素を取得する

要素のシャドウルートにスクリプトを挿入するときに、Host要素を参照する方法はありますか？

var element = document.createElement('div');
var script = document.createElement('script');
script.innerHTML = 'console.log(Host)'; // << How to get Host element??

var shadow = element.createShadowRoot();
shadow.appendChild(script);

document.body.appendChild(element);

http://jsfiddle.net/9b1vyu4n/

javascripthtmlgoogle-chromeshadow-dom
16
Bart

私はこれをついに理解しました。

仕様（作業ドラフト）によると、ShadowRootにはHostという読み取り専用プロパティがあります。 http://www.w3.org/TR/shadow-dom/#shadowroot-object

interface ShadowRoot : DocumentFragment {
    ...
    readonly    attribute Element        Host;
    ...
};

DOMツリーを上に歩くと、シャドウルートにたどり着くことができます。

while(e.nodeType != 11) { // 11 = DOCUMENT_FRAGMENT_NODE
    e = e.parentNode;
}
var hostElement = e.Host

私の場合、シャドウルートがスクリプト自体の親ノードであったため、より単純でした。

document.currentScript.parentNode.Host

http://jsfiddle.net/9b1vyu4n/2/

19
Bart

Node.getRootNode() 2016年に導入されました。

これで、次のようにHost要素にアクセスできます。

element.getRootNode().Host
17
darrylyeo