Shadow DOM CSS

[00:00:00]
>> We have a question?
>> If the button has a specific class name and we define styles for the class outside of the web component, those styles still don't apply.
>> Excellent segue into [SOUND] my next slide. Okay, so we couldn't start deep style, right? So what about classes?

[00:00:19]
That's the next thing, right, classes. Classes work everywhere, right? That's what I thought [LAUGH] until this. So pink is background, so in the Shadow DOM, this is background pink. Classes should work, right? If it does not work, Frustrating, right, because, again, breaks the expectation, I wrote pink up top, it should work down in the component.

[00:00:50]
To be honest, this may have massive implications for utility class sites like tailwind and stuff like that. But there is a way, there's actually a few ways, there's old ways and modern ways to get those styles, those classes. But basically cuz it's the same rule, I didn't author it so I don't control it.

[00:01:15]
And you could also think of this as class collision. If I'm using Google's material web button and I style whatever material web button from the parent, Google doesn't want it to change. They want it to still look like material web button or whatever. Okay, but there is a way if you're authoring, you can trick it.

[00:01:43]
Do you want to learn that way? It's fun to learn, but it'll make you feel gross. So link rel="stylesheet", okay? And then src, and then we're actually just gonna you link that, this is a CodePen feature. But you can go to any CodePen and type the extension off the end of it.

[00:02:06]
And it'll like, I'll just give you the CSS part. So we're going to basically double link the style sheet, right? We're linking to a style sheet from within the component. And, let's see here, hold on, now save it and refresh it cuz that was working this morning, let me see what's going on.

[00:02:31]
Link rel ="stylesheet", correct? You all should have caught that, come on Frontend Masters. [SOUND] So, all right, so you can inject style sheets by the old link tag. Yeah, it doesn't feel great, [LAUGH] but this would be a way to do it. There's actually more modern ways to do it.

[00:02:58]
But that starts getting into the, Not supported in everything realm and so I'd be happy to talk about it. But there's a feature called adoptedStyleSheets. And it's very cool, I'm very excited about it, but it's not ubiquitous, I don't think quite yet. Yes, another question?
>> Can we add the part attribute on the element and target it from the outside using a pseudo selector part?

[00:03:25]
>> Yeah, we totally can and that's jumping ahead like two slides. So I'll get there in two slides, is that okay? But we can totally use part to grab stuff. Okay, so global classes we learned doesn't really work unless we go the weird way [LAUGH], yeah?
>> On the kind of same track, if the mode is open and so that the component is accessible by JavaScript.

[00:03:57]
Is it possible and probably not recommended but to set attributes via JavaScript just like imperatively, is that something that works as well or does the Shadow DOM protect against?
>> You can, yeah, if it has a shadow root you can append a style block inside the element as well.

[00:04:17]
So there are ways, it's just nothing's cool, [LAUGH] until you get to adoptedStyleSheets. And, again, if you're using stuff off the shelf, you maybe don't control that. If it's closed, you can't get in but if it's open, you might be able to get in and futz with it.

[00:04:37]
So that's just an example. So I guess I could show that but that's maybe a deep dive but, yeah. One thing that does kind of work is this idea of inheritable styles. And I didn't know what these were, I had to look it up on MDN. Quite literally, it's anything that can have the value inherit in CSS.

[00:05:04]
But you might think of it as something that might cascade down into an iframe. If you set the color or the font size or something or the, I guess, what font family. Yeah, if you sent colors and fonts and stuff you would sorta expect an iframe to have some of the same behaviors.

[00:05:31]
It's a loose thing, but I think it's sort of, these styles can go everywhere. It's sort of a, these are blessed solutions, blessed styles. But I think you'd want it for any sort of importing or frames, probably this is old technology related to frames. So we have some like Light DOM texts and a Light DOM button with our button duplicator duplicates the buttons.

[00:05:52]
And then we have font family have fantasy and we're trying to get the button to do it. But I'll explain that, so it's just going to duplicate it right and then. So you'll notice the Light DOM button actually obeys the font but the Shadow DOM button does not.

[00:06:13]
This is another weird bit, more specifically maybe with buttons and replaced elements and how they it's like the system UIs Lbuttons show up in the Shadow DOM and stuff like that. So you don't have as much control. But I would have expected that to sort of work but it does not in the Shadow realm, and so that's too bad.

[00:06:33]
[LAUGH] Frustrating to say the least. But like it's good to know at least some things kind of cascade down through. So this does work but this can be, again, if positive or negative, you're like, why is the text read on my inputs, I don't understand. Well, it's cuz something bled into it.

[00:06:58]
So as good as our egg solution is, some stuff still goes through.