1
00:00:02,250 --> 00:00:09,040
Now with our own template being defined here, we can now also define some styles here

2
00:00:09,060 --> 00:00:14,010
and by the way this would have been possible with the template in the HTML file too because in

3
00:00:14,010 --> 00:00:23,130
here, we can now of course also add style tags as we can do in any Javascript file as we can do in normal

4
00:00:23,160 --> 00:00:29,130
HTML too, and the styles here and that is the interesting thing, since we do that on innerHTML of

5
00:00:29,130 --> 00:00:30,150
the shadow root,

6
00:00:30,330 --> 00:00:35,810
the styles here will only apply to the HTML code in our template,

7
00:00:35,880 --> 00:00:46,590
so to this span here or to the div we add dynamically and this means that we can now add all these styles

8
00:00:46,590 --> 00:00:50,340
down there in our style tag here.

9
00:00:50,490 --> 00:00:57,180
So I add a div selector and now I want to set the background color with normal CSS because this

10
00:00:57,180 --> 00:01:00,150
is now a normal CSS written in a string,

11
00:01:00,150 --> 00:01:01,680
so the background color is black

12
00:01:01,680 --> 00:01:07,240
let's say, the color, so the text color is white,

13
00:01:07,440 --> 00:01:10,350
the position is absolute,

14
00:01:10,530 --> 00:01:15,040
the z-index is 10

15
00:01:18,770 --> 00:01:25,310
and now I can't go down there and remove all these manual style assignments and still if we save that

16
00:01:25,700 --> 00:01:33,230
and we reload, we have the same styling as before but now we can write all styles conveniently as you

17
00:01:33,230 --> 00:01:41,060
are used to in HTML or in CSS syntax and it is scoped to this component only.

18
00:01:41,300 --> 00:01:48,410
Please note that I'm using a general div selector and yet if I go to index.html and I would add a

19
00:01:48,410 --> 00:01:49,630
div here,

20
00:01:49,670 --> 00:01:55,760
this does not get the web component styles because of the shadow DOM.

21
00:01:55,820 --> 00:02:03,830
So if I now reload, you see the orange border which makes sense because we set this up here but you don't

22
00:02:03,830 --> 00:02:05,140
see the black background,

23
00:02:05,150 --> 00:02:13,220
this does also not have the absolute position because we really have scoped styles, thanks to the shadow

24
00:02:13,220 --> 00:02:22,450
DOM and our styles being set up as the innerHTML of that shadow DOM for our custom web component.

25
00:02:22,610 --> 00:02:28,820
And this gives you a lot of flexibility regarding how you style your components, regarding the template

26
00:02:28,850 --> 00:02:34,340
you set up for them, regarding the elements you add to them and all of them is part of your custom element

27
00:02:34,490 --> 00:02:37,460
and does not spill over to your normal DOM.