그림자 dom - dom이 렌더링/변경 될 때를 알고 있습니다.

Question

페이지가로드되거나 변경 될 때 요소 속성을 수정하는 크롬 확장을 작성하고 있습니다.

나는 이것을 돌연변이 관찰자 (Mutation Observer)를 사용하여 수행한다. 그러나 shadow-dom (즉, 포함 된 트위터 게시물)이로드/변경 될 때 관찰자의 처리기가 호출되지 않습니다.

그림자 -dom이로드/변경되거나 돌연변이 관찰자를 연결할 때 이벤트를 가져 오는 방법이 있습니까?

감사합니다.

Answer 1

observe()shadowRoot 그림자 DOM이있는 요소 속성을 사용하면됩니다.

customElements.define('image-list', class extends HTMLElement { 
 
    connectedCallback() { 
 
    var observer = new MutationObserver(function(mutations) { 
 
     mutations.forEach(function(mutation) { 
 
     //Detect <img> insertion 
 
     if (mutation.addedNodes.length) 
 
      console.info('Node added: ', mutation.addedNodes[0]) 
 
     }) 
 
    }) 
 

 
    this.attachShadow({mode: 'open'}).innerHTML = '<img alt="image 1">' 
 

 
    observer.observe(this.shadowRoot, {childList: true}) 
 
    } 
 

 
    addImage() { 
 
    var img = document.createElement('img') 
 
    img.alt = ' new image ' 
 
    this.shadowRoot.appendChild(img) 
 
    } 
 
})

<image-list id=LI> 
 
</image-list> 
 
<button onclick="LI.addImage()">Add image</button>