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!
