2016-07-02 1 views
2

그림자 돔으로 요소를 만들었습니다.그림자 돔으로 jQuery 사용하기

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

나중에 코드에서 내가 만든 그림자 DOM에 액세스합니다. 이 작업 :

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

그러나이되지 않습니다

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

이 왜입니까?

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

jQuery를 사용하여 그림자 루트로 작업 할 수있는 더 나은/더 우아한 방법이 있나요 : 임시 솔루션 t 순간에서 그의 작품으로?

내가 사용하는 jQuery의 버전은 2.1.1이며 크롬 만 취급한다는 점에 유의하십시오.


편집 : 최상위 수준에 노드를 찾을 때 분명히 this.shadowRoot.children이 작동하지 않습니다.

답변

3

이것은 jQuery 2.1.1에서 문제가 될 수 있습니다.

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>

: jsfiddle에 jQuery를 2.1.3을 사용

이 문제를 해결하는 것