javascript - Using jQuery with shadow dom - Stack Overflow

admin管理员组

文章数量:1379636

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.

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.

• javascript
• jquery
• html
• shadow-dom

Share Improve this question Follow edited Jul 2, 2016 at 0:16 Derek 朕會功夫 asked Jul 2, 2016 at 0:04 Derek 朕會功夫Derek 朕會功夫 94.5k4545 gold badges198198 silver badges253253 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

This might be a problem with jQuery 2.1.1.

Using jQuery 2.1.3 in jsfiddle seems to solve this problem:

https://jsfiddle/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./jquery-2.1.3.js"></script>
<div id="dTest"></div>

本文标签： javascriptUsing jQuery with shadow domStack Overflow