与阴影dom一起使用jQuery [英] Using jQuery with shadow dom

问题描述

  / *一些准备代码* / 
 this.createShadowRoot （）; //创建影子根，这指的是元素
  

在后面的代码中，我将访问影子dom我创造了。这些工作：

$ p $ this.shadowRoot.getElementById（...）
this.shadowRoot.querySelector（ ...）


然而，这并不是：

  $（...，this.shadowRoot）
  

为什么呢？作为临时解决方案，他目前的工作是：

  $（...， this.shadowRoot.children）
  

有没有更好的/更优雅的方式来处理影子根目录jQuery？

请注意，我使用的jQuery版本是2.1.1，我只处理Chrome。

---

编辑：显然 this.shadowRoot.children 在查找顶层节点时不起作用。 / b>

解决方案

这可能是jQuery 2.1.1的一个问题。在jsfiddle中使用jQuery 2.1.3似乎可以解决这个问题：

https://jsfiddle.net/bnh74s87/

document阅读进度（DOMContent Loaded，function（）{var div = document.getElementById（dTest）; var shadow = div.createShadowRoot（）; shadow.innerHTML =< p为H.您好<！/ p为H.; document.body.appendChild（document.createTextNode（shadow.childNodes.length））;的console.log（shadow.querySelectorAll（ P））;的console.log（$（ P，阴影））; $（p，shadow）.html（Hello！）;}，false）;

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

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.

解决方案

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>

这篇关于与阴影dom一起使用jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！