Using jQuery with shadow dom

Question

Here I have created elements with shadow dom.

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

Later in the code I would access the shadow dom that I have created. These work:

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

However this does not:

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

Why is that? As a temporary solution this works at the moment:

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

Is there a better/more elegant way to work with the shadow root using jQuery?

Note that the version of jQuery I'm using is 2.1.1 and I'm only dealing with Chrome.

---

Edit: Apparently this.shadowRoot.children doesn't work when finding nodes at the top level.

Answer 1

This might be a problem with jQuery 2.1.1.

Using jQuery 2.1.3 in jsfiddle seems to solve this problem:

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>