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>