Web Component Styling - What you need to know

[@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.

[@jupiterdonkey3002]

Really enjoy watching your video.

[@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.

[@dosxmainyt9245]

Fantastic explanation! Thank you 😊

[@goffyfoot82]

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.

[@musicarroll]

Your videos are awesome! Thank you!

[@Holobrine]

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

[@SteveGriffith-Prof3ssorSt3v3]

Because the frameworks came before these were supported. They also include a lot of other logic for routing and rendering. The frameworks are not using these. The frameworks are just starting to use these. Version 19 of React is probably coming in May and it will likely be adding support for these

[@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?

[@SteveGriffith-Prof3ssorSt3v3]

Components are meant to contain their own styling. If you have a parent child relationship with custom web components then it will be the parent element that is creating the children and it will be able to pass information to the child via attributes. The parent will get some default styling information from the page. If you are talking two separate web components then they get some default styling from the web page but will need to have their own contained styles.

[@DarrenbyDesign]

@@SteveGriffith-Prof3ssorSt3v3 That makes sense to me and I guess my follow up question is what about two web component that are distinct but need to respond to one another? e.g. A Navigation container and nav items where the nav items are distinct components and the nav container is another component that can house those nav items

[@QuentinFalzon]

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

[@SteveGriffith-Prof3ssorSt3v3]

CSS is CSS. Tailwind, Bootstrap, etc. They are all just CSS stylesheets. Big libraries like Tailwind and Bootstrap should be applied at the root of the website though. They are not really meant to be added inside a component. They just add a lot of unnecessary size to the component. Remember, with components you are trying to build a new HTML element. Imagine if you had to import a library like Tailwind for each element on your webpage - , , , ... You are better off just adding the little bit of CSS that your component needs. Unless you are building an entire framework of components, and then you are going to build your own base CSS stylesheet that you will use for all your components. Each component will import that same library (so only imported and cached once by the browser), and then they all have access to the styles in that CSS stylesheet.

[@james_horan]

11:43 - when web components are built

[@mikebryan3270]

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

[@SteveGriffith-Prof3ssorSt3v3]

You could use a web component as a wrapper for a series of svg icons if you were designing and building them yourself. Then use an attribute to indicate which one you want. My next video in this series will be about using properties and attributes with Web Components. If you were using a set like the Material Icons from Google Fonts then I would just use ranges to define exactly which icons I wanted to download with the font.

[@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.

[@SteveGriffith-Prof3ssorSt3v3]

Yep. Thanks for adding that note.

[@ahmedsalahabdullah2317]

شكراً لك

[@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) {.....}

[@alph1tech493]

Please Upload more contents

[@SteveGriffith-Prof3ssorSt3v3]

I do whenever I have time.

[@silverxnfinity8352]

1st Again.