使用带阴影dom的jQuery

时间:2016-07-02 00:04:14

标签: javascript jquery html shadow-dom

这里我创建了带阴影dom的元素。

/* some preparing code */
this.createShadowRoot();  // creates shadow root, this refers to element

稍后在代码中我将访问我创建的影子dom。这些工作:

this.shadowRoot.getElementById("...")
this.shadowRoot.querySelector("...")

然而,这不是:

$("...", this.shadowRoot)

为什么?作为临时解决方案,他现在的工作:

$("...", this.shadowRoot.children)

使用jQuery使用影子根有更好/更优雅的方法吗?

请注意,我使用的jQuery版本是2.1.1,我只处理Chrome。

修改:显然this.shadowRoot.children在顶层找到节点时无法正常工作。

1 个答案:

答案 0 :(得分:3)

这可能是jQuery 2.1.1的问题。

在jsfiddle中使用jQuery 2.1.3似乎解决了这个问题:

https://jsfiddle.net/bnh74s87/



document.addEventListener("DOMContentLoaded",function(){
  var div=document.getElementById("dTest");
  var shadow=div.createShadowRoot();
  shadow.innerHTML='<p>Hi!</p>';
  document.body.appendChild(document.createTextNode(shadow.childNodes.length));
  console.log(shadow.querySelectorAll("p"));
  console.log($("p",shadow));
  $("p",shadow).html("Hello!");
},false);
&#13;
<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<div id="dTest"></div>
&#13;
&#13;
&#13;