1
00:00:02,180 --> 00:00:09,020
Before we dive into anything new, let me come back to the project or the examples we worked on and

2
00:00:09,050 --> 00:00:12,490
there specifically, I want to have a look at our tooltip again.

3
00:00:12,560 --> 00:00:16,960
Now keep in mind, this here is an example for our tooltip here,

4
00:00:17,050 --> 00:00:18,860
this web components thing

5
00:00:18,860 --> 00:00:23,210
and of course here in the developer tools, the Google Chrome developer tools in the elements tab we can

6
00:00:23,210 --> 00:00:25,640
see our own custom element here,

7
00:00:25,640 --> 00:00:27,960
we see the text attribute,

8
00:00:28,010 --> 00:00:31,120
we see the style we assign directly to it

9
00:00:31,130 --> 00:00:34,420
and that is also something we'll change a little bit, the way we do that

10
00:00:34,670 --> 00:00:40,550
and we see our shadow roots here and conveniently, the Chrome dev tools also highlight all the shadow

11
00:00:40,550 --> 00:00:43,760
DOM with this light gray background.

12
00:00:43,760 --> 00:00:50,900
Now one interesting thing to see here, and I am not sure if you noticed that before, is the fact that

13
00:00:51,230 --> 00:00:52,370
web components,

14
00:00:52,400 --> 00:00:56,600
so this part which actually gets pulled into this slot

15
00:00:56,630 --> 00:00:56,890
right

16
00:00:56,900 --> 00:01:01,520
because web components occurs before our question mark,

17
00:01:01,520 --> 00:01:08,060
so technically it gets pulled into that slot, even though it gets pulled in there,

18
00:01:08,180 --> 00:01:10,360
we see it's not part of the shadow DOM right,

19
00:01:10,430 --> 00:01:14,250
web components here in the DOM tree is part of the light DOM,

20
00:01:14,330 --> 00:01:21,350
it's a sibling of the shadow root and that is something crucial I want you to understand. With slots,

21
00:01:21,470 --> 00:01:25,760
you can project content into your shadow DOM,

22
00:01:25,760 --> 00:01:30,160
so you got an entry point into your shadow DOM from the light DOM

23
00:01:30,170 --> 00:01:37,640
so to say but you don't technically move the element into the shadow DOM, the browser just displays it

24
00:01:37,940 --> 00:01:45,260
as if it were part of it but actually, it's rendered differently in the DOM and you can see that here

25
00:01:45,470 --> 00:01:49,700
by the fact or you can tell by the fact that we still have our slot element here,

26
00:01:49,700 --> 00:01:56,750
you see our default which is not actually getting rendered because we passed our own text here and we

27
00:01:56,750 --> 00:02:03,230
see that it points at some other content, in this case it points at some text and if you click on reveal

28
00:02:03,230 --> 00:02:10,220
here by the way, you also jump to the content that gets displayed in that place

29
00:02:10,220 --> 00:02:12,610
but technically it's not moved in there,

30
00:02:12,650 --> 00:02:18,590
the DOM node is not moved into the shadow DOM and that is one crucial thing I want you to understand

31
00:02:18,800 --> 00:02:24,440
and I want you to be aware of because that really is important to get right and to be aware of.