shadow dom - wissen, wenn dom gerendert/geändert wird

Question

Ich schreibe eine Chrome-Erweiterung, die Elementeigenschaften ändert, wenn eine Seite geladen wird oder sich ändert.

Ich mache dies mit einem Mutation Observer. Allerdings wird der Handler des Beobachters nicht aufgerufen, wenn Shadow-dom (dh eingebettete Twitter-Posts) geladen/geändert werden.

Gibt es eine Möglichkeit, ein Ereignis zu erhalten, wenn shadow-dom geladen/geändert wird oder einen Mutationsbeobachter anhängen?

Danke!

Answer 1

Sie können einfach observe() die shadowRoot Eigenschaft des Elements mit einem Shadow DOM.

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>