Shining Light on the Shadow DOM - Styling Web Components

Explore the intricacies of styling Web Components in this comprehensive CSS Day 2023 conference talk. Delve into the nuances of Light DOM, Shadow DOM, encapsulation, slots, and templates, focusing on the styling aspects rather than JavaScript. Gain insights into how the cascade and inheritance work with Shadow DOMs, and learn essential terminology through a crash course. Discover potential pitfalls, browser inconsistencies, and practical compatibility approaches for seamless implementation. Examine how Web Components can be leveraged to build consistency in a codified design library through theming. Follow along with live coding examples, explore custom elements, autonomous custom elements, and encapsulation techniques. Understand the importance of CSS best practices, custom properties, and generic properties in Web Component development. Investigate the Spectrum Design System, slot tags, slotted styling, and the part specification. Conclude with an overview of utility languages and frameworks in the context of Web Components.

Introduction
Cassandra Roberts
Custom Element Registry
Custom Builtins
Autonomous Custom Elements
Encapsulation
CSS Best Practices
Building a Web Component
Live Coding
Moral of the Story
Custom Properties
Generic Properties
Be Thoughtful
Spectrum Design Systems
Web Component Encapsulation
What is Light on DOM
Slot tag
Sloted styling
Bonkers example
Part specification
Part example
Part in use
Global attribute names
Utility languages
Frameworks
Conclusion