Using Jquery With Shadow Dom

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 t

Solution 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);

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