웹 구성 요소 : 상위 태그의 스크립트를 통해 그림자 DOM에 액세스하는 방법?

가져 오기 파일에로드 된 JavaScript 코드를 사용하여 Shadow DOM의 태그에 액세스하려고합니다.웹 구성 요소 : 상위 태그의 스크립트를 통해 그림자 DOM에 액세스하는 방법?

말은, 내 사용자 지정 요소는 내가

<!doctype html> 
<html > 
<head> 
    <link rel="import" href="x-component.html"> 
</head> 
<body> 
    <div>I am parent element</div> 
    <x-component></x-component> 
    <script> 
     $('div').html('I replaced all div html'); 
    </script> 
</body> 
</html>

가 jQuery를 가정 사용자 정의 요소의 가져 오기 파일에 들어있는 스크립트에서이 태그를 액세스 할

<div>I am custom element</div>

을 사용하는 사업부가 있습니다 위의 예에서.

출처

2015-01-30 Souvik Basu

그림자 루트는 #querySelector(sel).shadowRoot을 통해 액세스 할 수 있습니다. 아래의 예는 액세스하는 원시 div와 ShadowDOM의 차이점을 보여줍니다.

// native divs 
    var divs = Array.prototype.slice.call(
       document.getElementsByTagName('DIV') 
      ); 

    divs.forEach(function(e) { 
    e.innerHTML = 'CHANGED'; 
    }); 

    // access shadowed divs 
    var shadowDivs = Array.prototype.slice.call(
        document.querySelector('x-component').shadowRoot.children 
        ); // or .querySelector('div') 

    shadowDivs.forEach(function(e) { 
    if(e.constructor === HTMLDivElement) { // divs only 
     e.innerHTML = 'CHANGED IN SHADOW'; 
    } 
    });

라이브 미리보기 : http://plnkr.co/edit/lNeTWF28jHP01ORCcAgU?p=preview

출처

2015-01-30 12:35:34 mudasobwa

웹 구성 요소 : 상위 태그의 스크립트를 통해 그림자 DOM에 액세스하는 방법?

답변

관련 문제