1 00:00:02,580 --> 00:00:07,550 To understand the shadow DOM, let's understand how the normal DOM, 2 00:00:07,560 --> 00:00:14,220 also sometimes called the light DOM, works and for that in your developer tools, you can click on the elements 3 00:00:14,220 --> 00:00:15,150 tab. 4 00:00:15,150 --> 00:00:17,570 This is your DOM tree essentially, 5 00:00:17,730 --> 00:00:22,380 you see that paragraph and in there you also see your custom component. 6 00:00:22,440 --> 00:00:27,350 Now when you expand your custom component, you also see that span that was added 7 00:00:27,480 --> 00:00:32,280 and when you hover over the question mark, you see that this div gets added here too. 8 00:00:32,520 --> 00:00:35,610 Now there is one important thing to note here, 9 00:00:35,670 --> 00:00:43,570 the span with the question mark and that overlay div are all added to the normal, to the light 10 00:00:43,570 --> 00:00:49,110 DOM here. We are not using anything special here, we're not using the shadow DOM, 11 00:00:49,110 --> 00:00:57,600 so our custom component here in the end has a child which is this span with the question mark. 12 00:00:57,600 --> 00:01:06,120 Now what would be nice is if in a normal, in the light DOM, we had our custom component and the span or 13 00:01:06,120 --> 00:01:13,320 anything else like this overlay div which gets added is kind of hidden away behind that and is not 14 00:01:13,410 --> 00:01:19,650 added to the normal DOM because that would then mean that any styles we set up in a normal DOM would 15 00:01:19,650 --> 00:01:24,380 not affect our nested custom component DOM. 16 00:01:24,390 --> 00:01:31,050 So basically our custom component here should have its own DOM tree which is not mixed or which is 17 00:01:31,050 --> 00:01:34,740 not kind of affected by the normal DOM tree 18 00:01:34,890 --> 00:01:41,160 and that would be the definition of the shadow DOM, our element should have its own DOM behind it 19 00:01:41,160 --> 00:01:47,820 which kind of makes up what we see on the page but which is not directly connected to the real DOM, which 20 00:01:47,820 --> 00:01:56,520 is not affected by global styles and the other way around. Now we have a specification in the browser 21 00:01:56,850 --> 00:02:04,950 that allows us to add such a functionality and we can unlock it in a very easy way, in the constructor 22 00:02:04,950 --> 00:02:13,770 we simply call this attach shadow and there, we pass a Javascript object where we simply set the mode 23 00:02:14,460 --> 00:02:22,470 to open. Now you can set it to closed and this simply defines whether you can access your shadow DOM 24 00:02:22,470 --> 00:02:26,130 tree from outside this component or not. 25 00:02:26,130 --> 00:02:31,860 Now closing is something you'll typically not do because even if it is closed, there are ways to still 26 00:02:31,860 --> 00:02:34,810 access it and it's simply not worth the effort, 27 00:02:34,980 --> 00:02:39,900 after all you are the developer and if you don't want to access it from outside, you simply don't 28 00:02:39,900 --> 00:02:40,810 do it. 29 00:02:40,950 --> 00:02:45,200 So we'll set it to open throughout the rest of this course. 30 00:02:45,200 --> 00:02:50,190 Now this element has its own shadow DOM tree attached to it, 31 00:02:50,340 --> 00:02:58,500 we now just have to make sure that whenever we add new DOM elements with append child, we don't append 32 00:02:58,500 --> 00:03:03,750 them to our HTML element which is still part of the light DOM 33 00:03:03,750 --> 00:03:10,920 but to the shadow DOM of that HTML element and for that, when I call append child, I will first of 34 00:03:10,920 --> 00:03:18,000 all access the shadow root and that is now set since we set up a shadow DOM here in the constructor, 35 00:03:18,510 --> 00:03:24,990 so this will now access the shadow DOM tree and append the child to it. Visually this will not change 36 00:03:24,990 --> 00:03:29,270 much but you will see that this will have a great impact 37 00:03:29,580 --> 00:03:36,420 and I do the same here where I append this tooltip container, I access my shadow root and also of 38 00:03:36,420 --> 00:03:44,640 course when I remove it, I access my shadow root, so I access the shadow DOM. With that you can now save 39 00:03:44,640 --> 00:03:50,420 that and if you now reload the page, you will notice one important thing right away, 40 00:03:50,700 --> 00:03:59,920 the text which was written between our opening and closing tags here, so web components 41 00:04:00,000 --> 00:04:01,550 and here we go, 42 00:04:01,560 --> 00:04:03,930 that text is gone now 43 00:04:03,930 --> 00:04:08,630 and the reason for it it can be seen when we inspect our custom element here, 44 00:04:08,670 --> 00:04:14,190 you see it now all of a sudden has a shadow root element which it didn't have before 45 00:04:14,190 --> 00:04:16,520 and there we see the shadow DOM. 46 00:04:16,530 --> 00:04:19,490 Now conveniently, we can see it here in the developer tools 47 00:04:19,590 --> 00:04:26,910 but thanks to that shadow root this is now detached from the main DOM and we can prove that by hovering 48 00:04:26,910 --> 00:04:34,980 over the question mark, you see the orange border of the div is now gone, even though we still have that 49 00:04:34,980 --> 00:04:38,020 rule here, we still have that styling rule 50 00:04:38,250 --> 00:04:45,570 but now with that shadow root being set up, this is gone. Now obviously as I just mentioned, our text 51 00:04:45,570 --> 00:04:48,700 between the opening and closing tag is also gone, 52 00:04:48,720 --> 00:04:52,350 so we have to bring that back and to bring it back, 53 00:04:52,410 --> 00:04:56,070 we'll use the other feature I mentioned, templates. 54 00:04:56,070 --> 00:04:57,840 Now what's up with templates?