Главная
Study mode:
on
1
Introduction
2
Cassandra Roberts
3
Custom Element Registry
4
Custom Builtins
5
Autonomous Custom Elements
6
Encapsulation
7
CSS Best Practices
8
Building a Web Component
9
Live Coding
10
Moral of the Story
11
Custom Properties
12
Generic Properties
13
Be Thoughtful
14
Spectrum Design Systems
15
Web Component Encapsulation
16
What is Light on DOM
17
Slot tag
18
Sloted styling
19
Bonkers example
20
Part specification
21
Part example
22
Part in use
23
Global attribute names
24
Utility languages
25
Frameworks
26
Conclusion
Description:
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. Read more

Shining Light on the Shadow DOM - Styling Web Components

Web Conferences Amsterdam
Add to list
0:00 / 0:00