Light DOM & Shadow DOM

[00:00:00]
>> So we've talked about HTML. Now, we're gonna get into CSS, and if I'm honest, this is one of the most frustrating parts of web components. So I like to get the bad stuff out of the way first or early on, because I do think if you've I find out about this later in your experience with web components, it can leave a sour taste, where you feel like they're broken.

[00:00:24]
But what it really is, and I don't mean not to be condescending, but what it really is, is it's new and you did not know that, and that is fine. We are going to learn and figure out what makes this different. And what is different about this is it involves something called piercing the Shadow DOM.

[00:00:45]
And this is simultaneously the dumbest and coolest phrase we have in web development. So we have to just roll with it, [LAUGH] we have to embrace it. We're going to learn how to pierce the Shadow DOM. And if you remember kind of earlier, we had that component, right?

[00:01:04]
Our custom alert, we put in some text or Light DOM, and then the web component, the encapsulation creates that shadow boundary around the components HTML that it injects. That boundary, it is a boundary, things can go through and things cannot go through, just like we wanna protect that egg, we want that egg to not leak out or leak in.

[00:01:33]
So I'm gonna do the thing where you just write styles, you chuck styles at the wall and see what sticks, okay? This is the tried and true development practice of just trying stuff until it works or doesn't work. So we're gonna start styling from the outside. So we're outside the egg and we're gonna try to style stuff inside the egg, okay?

[00:01:59]
Let's just see what happens. tl;dr, if you didn't write it, you can't style it, okay? This is just the rule of thumb, if you didn't write it, you can't stop style it. So styling Light DOM, right? So can we style the Light DOM we wrote? In here in my example element, I have a button, and it is my Light DOM button, and the example element is going to inject a Shadow DOM button as well.

[00:02:29]
So you'll see I'm saying all buttons, background pink, please, right, turn the button pink, and that is our test to see if it worked. And then you can see here this is a bunch of code, but this is our Shadow DOM button, and then our light DOM button should show up in that slot above it, right?

[00:02:47]
And the result is, drumroll please, sound effects team, thank you. And ta-da, so we can style the light DOM, that's our HTML, that's our CSS, we can style that. I wrote it, I can style it, fair enough, right? But would we go about styling that Shadow DOM button?

[00:03:12]
I think it's if we wanna style it from the outside, right? So I think it's really, the next intuitive thing my brain does as a CSS person is, I just say I'll just be very specific. I'm gonna say example-element, button background, pink. I'm laser focused, I'm going to target that button-element inside the Shadow DOM as best we can, right?

[00:03:40]
So buttons, background on pink. I should probably make that orange or something, but whatever, we want to turn this example-element button pink, right, same JavaScript. And the result is, [SOUND] It didn't work. That's because we didn't write it, right, we didn't write the Shadow DOM button. This is confusing, and actually that's the big frustrated graphic from earlier for me.

[00:04:10]
I am not used to this, as a CSS person, I'm used to full control, right? I can style anything on the page with the right selector. I can laser focus and change and manipulate anything I want, the style of anything I want. I should have that ability, but suddenly I don't.

[00:04:31]
So it's almost like an emotional problem. It feels like a loss of control, like no, I was in control of the page and now I'm not. This is broken, the problem is this thing, the problem is not me. It's the kids that are wrong, it's not me. But yeah, we have a question.

[00:04:48]
>> So why is that, is it because of the way the Shadow DOM works? It just won't let you, it doesn't care that you've put CSS on the element.
>> Right, correct, the way the Shadow DOM and boundary is sort of, I guess specked out, is that if there's encapsulation style, encapsulation.

[00:05:10]
I think there's technical reasons, because if you were able to deep style it, should that only go one level? What if you had buttons within buttons, or whatever, elements within elements? How far down that tree should that go? So I think you have logic problems for, does that just apply forever, Oo does it not?

[00:05:38]
But me as a developer, I would like a tool, and there's actually in the Web Components Community group, I think there's an idea of, you remember how we had open and closed Shadow DOM, right? Open means we can access the Shadow DOM from the outside, and closed meaning you can't.

[00:05:58]
I think there's this idea growing of open styleable child Dom in the original spec, and I'd be actually really amazed if it still worked in Chrome. [LAUGH] but there was this roll off, there we go. There's this deep selector, which was kind of like, go deep into this component and style this selector.

[00:06:25]
They didn't make the final version, I don't think obviously here. But there was just a kinda talk original concept, but I think it got shot down from an isolation standpoint. So the idea is I think just, and you could see this too. You have a website, and a really cool ad campaign.js is also put on your website.

[00:06:51]
And they are just going for it on their style, and all of a sudden, your buttons turn pink on your whole web app. That could be a problem too, like so I think the idea too is nothing. The styles in the web component don't shoot out, but then the styles don't shoot in.

[00:07:11]
So it's just a hypothetical argument there. But I think we're figuring out what, again, it's just sort of experimenting with the limitations, but it was talked about, it's being talked about, but it's not something you can do, so. So does that help everybody? Any more questions? We got two more.

[00:07:30]
This is the hard part, so I keep asking.
>> Could you go back a few slides, just wanted to distinguish the regular, the light DOM, and the, so here
>> Yeah.
>> If you have that Shadow DOM boundary, that's dynamically inserted in there, right, and that's the difference?

[00:07:47]
>> Yeah, correct.
>> Okay.
>> And so you can actually, like if we go, let me go to the CodePen. We'll go here and we can do some web inspecting. Are you ready? [SOUND] it looks actually a lot like my drawing. We have our example element, and then here's our Light DOM button, right?

[00:08:12]
And then we have the shadow root, and that's the shadow boundary that when you say attack shadow, it's creating this. And inside there, I put that slot element and then our Shadow DOM button, and the slot element is revealing the Light DOM button. It's confusing, again, cuz it's new, but you can actually click on here and figure out what it's talking about.

[00:08:35]
So that's kinda helpful too. So yes, question.
>> I was just wondering if a Shadow DOM is been both open and styleable, what would the benefits be over just not using a Shadow DOM?
>> Okay, if the Shadow DOM was open styleable, what would be the benefit of using it over just not using it?

[00:08:58]
Yeah, very little, [LAUGH] you would still have a degree of script-like containment, and you could still have your custom element. You could still have Shadow Dom, and so the API interface, what the people you work with author is very succinct. And you can put that in your server render template.

[00:09:27]
But yeah, there might not be like, no for me, there's still gigantic benefits. Because when I want to distribute the design system, I wanna use our tabs and our accordance, and then give them sort of a cool way to [LAUGH] I guess, author that in an intuitive way and sort of limit mistakes.

[00:09:57]
You and your company might have a tight integration with your CMS, where you're like, we only offered these three variants of the cool button or something. And so cool button only comes in three flavors and they have to choose one in the CMS or something like that. So that's maybe a situation where you'd wanna use web components still.

[00:10:23]
But yeah though, it sort of blurs the line. So I think there's if like, you offer open styleable, they'll use a bit of their islandness. But I think from an authoring perspective, there's just times where you're like, I just wanna style this, let me make the buttons pink, becaus I could leave work that day, so.