javascript - webcomponent 中的子元素

Question

假设我们有一个自定义元素以这种方式使用:

<list-image>
    <img src="" /> 
     .... 
</list-image>

其中list-image以 slider 方式显示img标签。如果组件的用户插入带有

的 img 标签

document.querySelector('list-image').insertAdjacentHTML('beforeend', '<img src="..." />');

组件是否有可能知道新元素img？

Answer 1

解决方案是使用 MutationObserver在 <list-image> 上自定义元素本身。

在connectedCallback()方法，观察子元素的变化:

customElements.define('list-image', 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])
      })
    })

    observer.observe(this, { childList: true })
  }
})

function add() {
  document.querySelector('list-image')
          .insertAdjacentHTML('beforeend', '<img alt="TOTO" />')
}

<list-image>
  <img alt="Image1">
  <img alt="Image2">
</list-image>
<button onclick="add()">Add image</button>