Deep Dive: Shadow DOM & CSS in Lightning Web Components

Join this session to understand how CSS styles behave in LWC in regards to shadow DOM. We'll talk about the different options that you have to make your styles traverse the Shadow DOM and the different strategies that you can follow to use common CSS stylesheets into your LWC projects. 00:00:00 Intro and Agenda 00:00:03 About Shadow DOM 00:10:15 Shadow DOM in Vanilla Web components and LWC 00:18:30 Cascading vs Inheritance with Shadow DOM 00:36:10 CSS Scopes - How SLDS styles pass through Shadow DOM 00:40:45 CSS Scopes - Importing CSS 00:50:25 CSS Custom Properties 00:59:14 Styling Hooks 01:06:15 Using Aura and SLDS Design Tokens in LWC 01:08:57 Use a JS property value in CSS 01:11:26 Summary