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. 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!

----

Hosted by Jared White: https://indieweb.social/@jaredwhite

Follow us on Mastodon! https://social.spicyweb.dev/@vanilla

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!
  / 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.

Also be sure to check out our growing body of web development articles:
https://www.spicyweb.dev