影子 dom - 知道 dom 何时渲染/更改

Question

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

我使用突变观察器来做到这一点。但是，当加载/更改影子 dom（即嵌入式推特帖子）时，不会调用观察者的处理程序。

有没有办法在加载/更改 shadow-dom 时获取事件或将突变观察者挂接到它？

谢谢！

Answer 1

您可以使用 Shadow DOM 简单地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或树中更深的变化时， 在@Supersharp的答案中使用突变观察器，除了将subtree添加到配置中（或者可能使用各自的 shadowRoot 设置子项以调度一个事件，{composed: true, cancelable: true, bubbles: true}通知祖先到您的更改组件;

需要向shadowRoot添加一个插槽，并将事件侦听器添加到其中，例如shadowRoot.innerHTML = <slot onslotchange=...>empty slot</slot>适应上下文

https://developer.mozilla.org/docs/Web/API/HTMLSlotElement/slotchange_event