Question

我正在编写一个chrome扩展，在页面加载或更改时修改元素属性。

我使用Mutation Observer做到这一点。但是，当加载/更改shadow-dom（即嵌入式Twitter帖子）时，不会调用观察者的处理程序。

有没有办法在加载shadow-dom /更改或挂钩变异观察者时获取事件？

谢谢！

Answer 1

您可以使用Shadow DOM简单地observe()元素的shadowRoot属性。

＆＃13;

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)
  }
})

＆＃13;

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

＆＃13;

shadow dom - 知道何时呈现/更改dom

1 个答案: