`slotchange` event

📗 參考

• JS.info ⟩ Updating slots

• Google ⟩ Working with slots in JS

👉 相關

• Shadow DOM Events

📘 手冊

• MDN ⟩ MutationObserver

• MDN ⟩

  • HTMLSlotElement ⟩ assignedNodes(): Node[ ]

  • Element ⟩ assignedSlot: HTMLSlotElement - slot that element is assigned to.

Note: "slotchange" does not fire when an instance of the component is first initialized.

The slotchange event fires when a slot's distributed nodes changes. For example, if the user adds/removes children from the light DOM.

const slot = this.shadowRoot.querySelector('#slot');

// ⭐️ `slotchange` event listener
slot.addEventListener('slotchange', e => {
    console.log('light dom children changed!');
});

To monitor other types of changes to light DOM, you can setup a MutationObserver in your element's constructor.

example

💾 replit

CustomMenu.js

const { log } = console;

// CustomMenu
class CustomMenu extends HTMLElement {

    // connected to doc
    connectedCallback() {

        // shadow root
        const root = this.attachShadow({mode: 'open'});

        // shadow dom tree (with named slots ⭐️)
        root.innerHTML = `
        <div class="container">
            <slot name="title"></slot>
            <ul><slot name="item"></slot></ul>
        </div>
        `;

        // container (div.container)
        this.container = this.shadowRoot.firstElementChild;

        // ⭐️ shadowRoot can't have event handlers, 
        //    so using the first child.
        this.container.addEventListener('slotchange', e => {
            let slot = e.target;                // changed slot (in shadow DOM)
            log("slotchange: " + slot.name)     // ⭐️ slot name
            if(slot.name === 'item'){
                // ⭐️ slot.assignedElements() is of type `Element[]`
                let items = slot.assignedElements().map(elem => elem.textContent);
                log('items:', items);
            }
        });

    }// end: connectedCallback()

}// end: CustomMenu

// register <custom-menu> tag
customElements.define('custom-menu', CustomMenu);

script.js

// ⭐️ elem.$('div')
Element.prototype.$ = function(selector){
    return this.querySelector(selector);
};

// add 3 new menu items every sec
['Lollipop', 'Apple', 'Milk Shake'].forEach((text, i) => {
    setTimeout(() => {
        customMenu.insertAdjacentHTML('beforeEnd', 
            `<li slot="item">${text}</li>`
        )
    }, 1000 + i * 1000);
})


// change menu title in 4s
setTimeout(() => {
    customMenu.$('[slot="title"]').innerHTML = "New menu ⭐️";
}, 4000);

html

<custom-menu id="customMenu">
	<!-- ⭐️ light dom: slotted elements -->
	<span slot="title">Candy menu</span>
</custom-menu>

⭐️ `slotchange` events

slot name	notes
title	<span slot="title">Candy menu</span> inserted into title slot.
item	new <li slot="item"> tag inserted into item slot.
item	new <li slot="item"> tag inserted into item slot.
item	new <li slot="item"> tag inserted into item slot.

there's NOslotchange event after 4 sec (on modifying the content of a slotted element).

If we’d like to track internal modifications of light DOM from JavaScript, use: MutationObserver.