Web Component Styling - What you need to know
HTML-код
- Опубликовано: 8 сен 2024
- 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.
Code from this video: github.com/pro...
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.
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.
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.
Really enjoy watching your video.
Fantastic explanation! Thank you 😊
Your videos are awesome! Thank you!
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.
Yep. Thanks for adding that note.
I just found this series, I can’t understand how SPA frameworks are so huge when this API is right here
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
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?
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.
@@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
Would styling behave the same if it were applied to the web component using Tailwind CSS?
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.
شكراً لك
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) {.....}
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
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.
11:43 - when web components are built
Please Upload more contents
I do whenever I have time.
1st Again.