webcomponent中的子元素

Question

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

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

其中list-image以滑块方式显示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>