Web Components in Action

Chapter 11. A real-world UI component

This chapter covers

• Building a brand-new component and refreshing our memories about what we’ve learned so far, including the Shadow DOM, modules, the Custom Element API, and reflection
• Breaking a design into multiple components and focusing on component reusability to use a single, smaller component for a dual purpose in a bigger context
• Using the MutationObserver feature to watch for attribute changes
• Event bubbling inside your component
• Component best practices as related to switching between using the Shadow DOM or not
• Using consistent and universal design rules provided by CSS vars and importable CSS modules

Now is a great time to step back and take stock of everything we’ve learned. We’ve done ...