將jQuery與Shadow dom一起使用

Question

在這里，我創建了具有陰影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不起作用。

Answer 1

這可能是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); 

 <script src="https://code.jquery.com/jquery-2.1.3.js"></script> <div id="dTest"></div>