Web Component Styling - What you need to know

This tutorial builds on the first one about creating basic components and explains how you can style elements of your component both from within and from external stylesheets.

[sovereignlivingsoul]

excellent video, i have been watching videos trying to find out how to give the user the option to modify my components, you provided exactly what i wanted to know, i was currently working from a video about two years old and i have a whole lot of code that wasn't working, your method worked right away, very nice, will save time in future designs.

[arthursvpb]

I am currently working on a Lit project and today I struggled a lot when styling and "piercing" this shadow DOM stuff. This will help me a lot! Thanks.

[goffyfoot]

Great Stuff Thanks for your time and energy. Very well created and explained, you have a DJ or anouncers tone and very good way of communicating this stuff.

[helidrones]

Do not forget about CSS variables like
:root { —primary-color: #efefef; }
which can be referenced inside web components to allow for some basic global styling.

[Holobrine]

I just found this series, I can’t understand how SPA frameworks are so huge when this API is right here

[DarrenbyDesign]

This is an amazing resource! I have a question if others haven't asked it before. How would you handle the styling relationship between two Web Components. What about a parent child relationship between a container and its children for example?

[QuentinFalzon]

Would styling behave the same if it were applied to the web component using Tailwind CSS?

[mswondo]

For ::part, we should say about scope. Because May be we have two or more component or element with the same part.

For example :

big-bang ::part(title) {
}

Or more specivic :

big-bang#theory ::part(title)

[mikebryan]

Would web components be suitable for svg icons? I have coded one but need to do more research for multiples. Thanks for providing video on the subject with vanilla js