シャドウドームでjQueryを使用する

Question

ここでは、シャドウドームを持つ要素を作成しました。

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

コードの後に​​、私が作成したshadow domにアクセスします。これらの作業：

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

は、しかし、これはしません：

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

それはなぜですか？一時的な解決策tの瞬間で彼の作品のように：

$("...", 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>