要素のシャドウルートにスクリプトを挿入するときに、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);
私はこれをついに理解しました。
仕様(作業ドラフト)によると、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