Allow MutationObserver to observe across <slot>s

What problem are you trying to solve?

As a custom element author, you have a couple of mechanism available to you to detect changes in slotted elements:

The slotchange event
MutationObserver

For most cases slotchange is enough, but if you want to detect changes to attributes for example, you need MutationObserver.

Now as long as you have no nested slots, then everything is fine. However, as soon as you have a nested slot, MutationObserver also no longer works. For example:

<x-foo>
  <template shadowrootmode="open">
    <x-bar>
      <template shadowrootmode="open">
        <slot></slot>
      </template>      
      <slot></slot>
    </x-bar>
  </template>
  <button>Button</button>
</x-foo>

In the above scenario <x-bar> would have a MutationObserver that monitors it's own host element. It will not fire when the button changes or a second button is added.

I propose a new option to the MutationObserver.observe() method called flatten or composed (name TBD) that would instruct the observer to also observe any slotted children of any slots it is observing.

What solutions exist today?

None

How would you solve it?

New flatten or composed option to MutationObserver.observe()

Anything else?

No response

This would be a useful addition.

Right now, although it's a little clunky, I think you can leverage slotchange to do most of this:

const myObserver = new MutationObserver(callback);

let previousAssigned = new Set();

slot.addEventListener('slotchange', (e) => {
  myObserver.disconnect();
  const assigned = new Set(this.observeSlot.assignedElements({flatten: true}));
  assigned.forEach(el => {
    myObserver.observe(el, {attributes: true});
  });

  // if needed, an process slot changes similar to other mutation observer childList mutations...
  const addedNodes = Array.from(assigned.difference(previousAssigned));
  const removedNodes = Array.from(previousAssigned.difference(assigned));
  callback([{target: slot, addedNodes, removedNodes}])

  previousAssigned = assigned;
})

@sorvell

@sorvell slotchange doesn't fire for manual assignment, so that's another use case for this.

@sorvell slotchange doesn't fire for manual assignment, so that's another use case for this.

I'd love to see this added to MutationObserver. This is just a point of clarification: seems like it does fire?

@sorvell slotchange doesn't fire for manual assignment, so that's another use case for this.

I'd love to see this added to MutationObserver. This is just a point of clarification: seems like it does fire?

It appears you're right! No idea why I had that impression, but I’m very glad I was wrong 😅 Thank you!

Navigation Menu

Repository navigation

Allow `MutationObserver` to observe across `<slot>`s #1415

What problem are you trying to solve?

What solutions exist today?

How would you solve it?

Anything else?

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Allow MutationObserver to observe across <slot>s #1415

Description

What problem are you trying to solve?

What solutions exist today?

How would you solve it?

Anything else?

Activity

sorvell commented on Oct 24, 2025

LeaVerou commented on Dec 13, 2025

sorvell commented on Dec 13, 2025

LeaVerou commented on Dec 15, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

Allow `MutationObserver` to observe across `<slot>`s #1415