shadow dom - 知道什么时候 dom 是 rendered/changed

Question

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

我使用 Mutation Observer 执行此操作。然而，当 shadow-dom（即嵌入的推特帖子）为 loaded/changed.

时，不会调用观察者的处理程序

有没有办法在 shadow-dom 为 loaded/changes 时获取事件或将突变观察器挂接到它？

谢谢！

Answer 1

您可以简单地 observe() 带有影子 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>

Answer 2

如果使用 slotchange 事件简单地对内容进行开槽是最简单的，它不会触发更深层次的变化，只是开槽（不像观察子树和 childList 的突变观察者）；它就像插槽上的 childList 的观察者，是分离组件和插槽内容之间关注点的最佳方式；当出于某种原因观察组件自身 shadowRoot 或树中更深层次的变化时，请使用@Supersharp 的答案中的变异观察者，除了将 subtree 添加到配置中（或者可能将子级设置为各自的 shadowRoots分派一个事件 {composed: true, cancelable: true, bubbles: true} 将更改通知给你的组件的祖先；

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

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

shadow dom - 知道什么时候 dom 是 rendered/changed

shadow dom - know when dom is rendered/changed

html

javascript

dom

web-component

shadow-dom