1
00:00:02,750 --> 00:00:05,330
Let's start with our lost text.

2
00:00:05,330 --> 00:00:13,490
It's easy to bring back because the template solution here has a tool for us to enable us to pass some

3
00:00:13,490 --> 00:00:22,270
content between our opening and closing tags of the web component and this feature is called slots.

4
00:00:22,400 --> 00:00:29,090
We can define a slot in the template which basically means hey you can insert the content which is between

5
00:00:29,090 --> 00:00:33,080
the opening and closing tag of our element in that place.

6
00:00:33,380 --> 00:00:41,210
You do that by simply adding a slot element, opening and closing, nothing in between, like this inside

7
00:00:41,210 --> 00:00:46,980
our our template. If you do that with just that addition,

8
00:00:47,130 --> 00:00:53,850
if you now reload the page, you'll see our text is back and now the question mark is correctly added

9
00:00:53,880 --> 00:01:00,570
after it because essentially, it's now taking this as a template and this template says here is the place

10
00:01:00,840 --> 00:01:07,350
for whatever you pass between the opening and closing tag and thereafter we have our own DOM, our own

11
00:01:07,350 --> 00:01:10,020
template whenever we want to have.

12
00:01:10,050 --> 00:01:18,240
So this works now as before but now we're taking advantage of that slotting mechanism. Now slots also

13
00:01:18,540 --> 00:01:23,460
can have a default value, some default

14
00:01:23,460 --> 00:01:28,610
and this will kick in if you don't pass anything between the opening and closing tags.

15
00:01:28,650 --> 00:01:34,260
So if I delete my text down there for the second usage of this custom component and I then go back to

16
00:01:34,260 --> 00:01:41,970
the page and reload, we see some default here because the text I passed between my slots tags then is

17
00:01:41,970 --> 00:01:47,720
used as a default unless we override it with our own text as we do up there.