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

[@logesh_72]

Old but gold!!! Learnt a lot from this video. Great work Alba and Aditya 👏

[@birenajmera207]

This was one of the best videos I've seen on understanding the concepts behind how css works inside lwc. Thanks a million!!

[@luchomarchese]

Excellent video, best explanation I've ever seen for LWC styling behavior. Thanks for sharing!

[@SalesforceDevs]

You are so welcome!

[@dominiquestiekema824]

Everything makes sense now! Thank you

[@prashanthkumarenagandula9988]

Great session. Thanks a lot! :)

[@prashanthkumarenagandula9988]

Thanks for this session. Very helpful

[@van_der_gruca]

Thanks guys, that was really useful!

[@shashankshivram6769]

thank you for the session : very informative

[@sudarshanpatekar3797]

Thank you guys.....Very informative!!!!

[@tomhollins9266]

Your presentation was very clear. Good job.

[@matejstorga]

thank you! very useful

[@deepakjayavel6029]

Informative one

[@SandeepSingh-xp3ke]

Very well explained

[@muditagrawal2897]

Thank YOU for sharing. 🤩🤩

[@user-js4px6fe1p]

thanks

[@yuriipinchuk2027]

Thank you guys, very useful content! Just one out of topic question: how Alba able to see in VS code changes from Aditya ? It some extension for git?

[@rahulgawale]

Magic happens at 44:16!

[@bommanisrikanth4047]

is it possible to override standard slds classes in lightning data table to remove horizontal scrollbar

[@somijaiswal9277]

can you guys please explain how to by pass shadow dom in LWC oss.

[@AlbaRivasSalesforce]

using CSS custom properties as explained in the video, it's the same for OSS