首页 文章

获取shadow root主机元素

提问于
浏览
13

将脚本插入元素的阴影根时有没有办法引用主机元素?

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/

2 回答

  • 17

    我终于弄清楚了 .

    根据规范(工作草案), 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/

  • 12

    Node.getRootNode()于2016年推出 .

    您现在可以像这样访问主机元素:

    element.getRootNode().host
    

相关问题