关于javascript：shadow dom-知道dom何时被渲染/更改

shadow dom - know when dom is rendered/changed

我正在编写一个Chrome扩展程序，该扩展程序会在页面加载或更改时修改元素的属性。

我使用Mutation Observer进行此操作。但是，在加载/更改shadow-dom(即嵌入式Twitter帖子)时，不会调用观察者的处理程序。

有没有一种方法可以在影子dom加载/更改时获取事件，或者将突变观察者挂钩到该事件？

谢谢！

您可以简单地使用Shadow DOM observe()元素的shadowRoot属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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)
}
})

1
2
3

<image-list id=LI>
</image-list>
<button onclick="LI.addImage()">Add image</button>