影子dom -知道dom何时呈现/更改

Question

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

我是用变异观察者做的。但是，当加载/更改影子域(即嵌入的twitter帖子)时，不会调用观察者的处理程序。

是否有一种方法可以在加载/更改影子时获取事件，或者将突变观察者钩到事件上？

谢谢!

Answer 1

您可以使用Shadow简单地observe()元素的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>

​

Answer 2

如果使用slotchange事件简单地对内容进行时隙设置是最简单的，那么它不会触发更深层次的更改，只触发插槽(不像观察子树和childList的变异观察者)；它就像插槽上的childList观察者，也是区分组件和时隙内容之间的关注点的最佳方法；当由于某种原因观察组件自身的shadowRoot或树中的更深的变化时，除了在配置中添加subtree之外，使用@Supersharp中的突变观察者(或者可能设置带有各自shadowRoots的子程序来向祖先发出{composed: true, cancelable: true, bubbles: true}通知的事件)；

需要在shadowRoot中添加一个插槽，并将事件侦听器像shadowRoot.innerHTML = <slot onslotchange=...>empty slot</slot>一样添加到其中，以适应于在上下文中工作。

event