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.
@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.
@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.
@dosxmainyt924511 ай бұрын
Fantastic explanation! Thank you 😊
@musicarroll4 ай бұрын
Your videos are awesome! Thank you!
@DarrenbyDesign10 ай бұрын
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-Prof3ssorSt3v310 ай бұрын
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.
@DarrenbyDesign10 ай бұрын
@@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
@Holobrine7 ай бұрын
I just found this series, I can’t understand how SPA frameworks are so huge when this API is right here
@SteveGriffith-Prof3ssorSt3v37 ай бұрын
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
@helidrones8 ай бұрын
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-Prof3ssorSt3v38 ай бұрын
Yep. Thanks for adding that note.
@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.
@QuentinFalzon3 ай бұрын
Would styling behave the same if it were applied to the web component using Tailwind CSS?
@SteveGriffith-Prof3ssorSt3v33 ай бұрын
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.
@ahmedsalahabdullah2317 Жыл бұрын
شكراً لك
@alph1tech493 Жыл бұрын
Please Upload more contents
@SteveGriffith-Prof3ssorSt3v3 Жыл бұрын
I do whenever I have time.
@james_horan6 ай бұрын
11:43 - when web components are built
@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) {.....}