shadow dom - 知道何時渲染/更改dom

Question

我正在編寫一個chrome擴展，在頁面加載或更改時修改元素屬性。

我這樣做使用突變觀察。但是，當shadow-dom（即嵌入的twitter帖子）被加載/更改時，不會調用觀察者的處理程序。

有沒有辦法在shadow-dom加載/更改或將突變觀察者掛鉤時獲取事件？

謝謝！

Answer 1

您可以簡單地observe()帶有Shadow DOM的元素的shadowRoot屬性。

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>