假设我们有一个以这种方式使用的自定义元素:
<list-image>
<img src="" />
....
</list-image>
其中list-image以滑块方式显示img标签。如果组件的用户插入了img标记
document.querySelector('list-image').insertAdjacentHTML('beforeend', '<img src="..." />');
组件是否可以知道新元素img?
解决方案是在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>
更新,从此页面:qazxsw poi
新的子节点会自动插入并导致插槽更改,因此不需要MutationObserver。