Host & Other Selectors

[00:00:00]
>> Again styling is cool, but there's actually new CSS you have to worry about inside the Shadow DOM. So Shadow DOM, only CSS, as if this wasn't tricky enough, there's now a new step you have to learn for your job. So host, right, host is basically a way to select, from inside the web component, you select the parent host, the parent custom element.

[00:00:29]
Does that sound right? So the Shadow DOM goes inside the custom element, but you want to style custom-alert. So how you do that, I have a div here with a p, but I want to also add a p inside the host, and I'm gonna do the slot thing.

[00:00:51]
And then I can style this one, the host p, I can reference things inside the shadow element. I could style the whole host as well. But this is stuff you have to do in here. I could do, I have to open this. I can style the whole host.

[00:01:13]
I may need to make a display block, cuz it's just kinda weird about that, right? And so now, I can style the whole element itself. So this is helpful if you just need a little more. If you want the whole element to be different colored background or something like that, this is a good way to just kind of let's style the host itself.

[00:01:45]
And then there's actually a cool thing. Not only can you do that, but you can style based on the host context. What element is the hosting? I'm gonna change it. So this one, our example element is just a regular example element. And then we have an example element in a card.

[00:02:09]
And we told our thing, if you're in a card, if you're in the host context of a card, turn your background pink, and then add I'm in a card, and it does it. So that's kind of a superpower too. If you think about like, I think of cards all the time, I don't know.

[00:02:29]
If something's in a card, I maybe want the padding or something to behave a little differently or something like that, I don't wanna write these one-off overrides or something like that. I'm thinking buttons or something. But again, this is sort of newish tech. But I think there's places where you can use this and sort of contextualize your element based on where it appears, cuz we don't know where our components appear.

[00:02:58]
But now, we can kinda say, well, if it appears in this situation, now do something. So a little different, a little new, it's like a parent selector almost or something, or the ampersand in SAS or something like that. Slotted, okay, this is actually a pseudo-element, that's why there's two dots.

[00:03:22]
This is basically just says anything that gets slotted in. And it will target slotted content, but again, it has that same limitation like part, it only does one level deep. So I have this example element, I'm pink, but I'm also gonna slot in a div with a paragraph and it's gonna say, I'm not pink.

[00:03:46]
And then my SAS or CSS inside the web component is all slotted paragraphs, turn background pink. And as you see, the nested paragraph tag does not get styles applied. That's because it's too deep, it can only select one level deep. And then our Shadow DOM paragraphs ,our host paragraphs are orange.

[00:04:12]
So one thing you can do, this is something I've totally done, slotted(*). So anything slotted at the root element, just turn it pink, that's one way to work around it. But again, you can't do complex selectors in here, unfortunately. So I wish it worked like that. And I think there's even been conversations about maybe enabling that, compounds selectors in slotted, but that's not something that exists yet, so.

[00:04:51]
Slotted, and then there's kinda one more new special CSS feature called defined. You'll see the slow element and it took a while, right, to come in. I'll redo the animation here. It's gonna take a little, I set it to fire two seconds late. You can say, if the slow element is not defined in your CSS, lower the opacity.

[00:05:14]
And actually, you could do that for any element, because every element in HTML comes defined out of the box. And if you just had like, not :not:defined in your SAS or CSS, it would just hide any custom element that has not been defined yet. But you can also do a slow, [LAUGH] and then when it is defined, you can trigger the opacity or whatever.

[00:05:42]
This is cool and lets you control fallback experiences. You could think of a situation where maybe you want to, if it's not defined, make the height 500 pixels. Cuz I know an element, an image or something's gonna show up in here, that might help in your performance metrics.

[00:06:04]
But it also can just be a situation where you wanna make those skeleton screens or something like that, you could kind of fake this stuff in pretty easily in your Shadow DOM. So you can have some fake content that then kind of whatever, pulses [LAUGH] and fades or something, and then, boom, upgrades when it's been defined in the custom element, is happening, so is engaged.

[00:06:32]
So kind of interesting, I think that details utils, I think Zack used it to do the like, he'll hide it and open it and measure it. And that's how you measures it before it's been defined or something like that, so kind of interesting. And then when it's defined, then he applies the animation stuff.