Skip to content

Observing Slotted Mutations in Your Web Components

One of the very cool things about using shadow DOM inside your web components is you can separate your internal component’s structure and functionality from the consuming usage of the component (aka “light DOM”) using slots.

By Jared White

One of the very cool things about using shadow DOM inside your web components is you can separate your internal component’s structure and functionality from the consuming usage of the component (aka “light DOM”) using slots. Now you might think there’s an obvious way to monitor slot content changes and react accordingly, and the slotchange event seems like the way to go at first glance. Except…that often isn’t what you actually want!

In this video, I show you how to instead set up a MutationObserver, so you can monitor any changes to child content in a slot and update your UI in real-time. And you’ll learn a bit more about vanilla DOM APIs along the way!


Did you enjoy the video? What would you like to see me cover next? Let me know in the Discord!

(watch instead on YouTube)

Want to join a fabulous community of web developers learning how to use “vanilla” web specs like HTTP, HTML, CSS, JavaScript, & Web Components—plus no-nonsense libraries & tools which promote developer happiness and avoid vendor lock-in?

Join The Spicy Web Discord

It’s entirely free to get started. And we’ll soon be launching paid courses to take you even deeper down the rabbit hole, so stay tuned! Vanilla has never tasted so hot.