Styling Web Components

[00:00:00]
>> Okay, so now we know Shadow DOM and all the stuff. What about the style sheets? Because I do have a CSS file for the Menu Page, MenuPage.css. How can we load this and apply it to my web component? Well, believe me that after all these parts, everything will work magically.

[00:00:24]
So we need to load the CSS, where? It can be in the constructor, in connected callback, how? Using the Fetch API. So let's say the best way to do that is to create a function. That we can call that load CSS. By the way can I create the function inside the constructor in JavaScript?

[00:00:50]
Yeah, yes, I can, no problem. Remember functions are just different kinds of objects in JavaScript. So it's a variable, in fact, if you don't like that syntax, you can use this one, you can use const load CSS equals to, and it's just the same, okay? But anyway, I just wanna force your brain in to see something different.

[00:01:17]
Why I'm creating a new function, because I'm going to use fetch, I'm going to use await, so I'm going to fetch for components/MenuPage.css, like that. I'm going to get that set request and because it's await I need a sync. And I cannot convert my constructor into async so that's why I need Another function that by the way, I need to call.

[00:01:46]
I can also use the little anonymous function if you want, but anyway. And when I have that request, I need to get the text from it. So I will say something like, okay, the CSS, it's what text is returning. That is actually also another promise. Now I'm not reading JSON, I'm reading text.

[00:02:08]
What I'm going to do is that I need to create a styles object somewhere, For example, here. I'm going to create a styles with create element. Style, and I'm going to attach that style to my shadow DOM, appendChild(styles). But it's empty, but now we can fill the text content of it with our CSS.

[00:02:39]
It's a little hacky. Yes, it works. Do we need to do this on every component? If you want to use this technique of loading CSS from an external file, yes. But remember, this is OOP. So I can create my base class that will do this for me on every web component.

[00:02:59]
It's not really complicated. So if this works, and we hope that it works, now we have within the shadow DOM and a style declaration with the style for that component. And again, if you're thinking well, but we are loading the CSS file, far away the loading timeline. So maybe we will have problems like visual issues with this you can if you want use link rel you can use prefetch or preload and you can pre load that file.

[00:03:38]
I'm not saying you have to do this, but just explain that you can do that. Components Details page CSS, as stylesheet. If you do that, then the browser will start downloading that CSS as soon as possible, even if he doesn't know why you will need that later. So then when the web component asked for it it's already there.

[00:04:02]
Okay so you can improve that performance later. Or you can check the style directly in the template or wherever you wanna use here. If you can use your imagination or at one point you say I feel that I can use a library well if you find a library that targets specifically that problem and you like it and it's lightweight go ahead