Variables, Theme & Parts

[00:00:00]
>> Styling from the inside, okay. Let's say we have control we can author the web component these are Rs CSS variables and we talked about this a little bit before. CSS Custom properties, that's their official name are in a type of inheritable style. They cascade down through elements.

[00:00:23]
And so we can set our BG variable and our dash dash text variable, and we can alter the web component, the inside of the web component from the outside. So, are alert, we're setting that on the outside and then inside, it's actually looking for some variables. It says if you define that variable, I will render that variable.

[00:00:50]
I know how to do that. So, this all depends on the plugin, you know that shadow scroll plugin I used, that had them two up, that has some variables that you can use to style inside the accent color. This is a real good way for you as a component author to appears designers [LAUGH] but to offer a little bit of customization that might get some mileage out of your component.

[00:01:19]
That's colors, that's padding that's like specific sizes or something like that. If you can variable eyes those parameters, you can basically you don't have to make 10 copies of the same button. Just to appease everyone in the organization. Does that sounds pretty good? Offer a little customizability goes a long way.

[00:01:43]
Okay, pre-defined themes is another thing that web components do. I think of like the Gmail comfy cozy, switcher UI, you can offer these sort of things in your web components. This customer I have like a, a warning or a danger warning is yellow,, red is danger. Offering these like controls is super helpful for, again, sort of like pre-defined styles and themes, sizing colors.

[00:02:16]
Maybe you don't want your designers inventing their own, or whoever, developers, inventing their own padding system, maybe you give them one of two or three choices. And where I see this working out well too is kind of if you have a CMS integration or something like that. And they can just specify how much padding they want on the alert or the.

[00:02:39]
The how big it needs to be or something like that or a theme. This is the special event one or something like that. So yes, we have a question.
>> Theme is not a reserved keyword in the spec, it's just a best practice.
>> Yeah, just a best practice.

[00:02:55]
This could be sighs, this could be whatever you want to call it. So that attribute is something you program. I can show you I think in here. Scrolling, scrolling, scrolling, I defined it in my properties. So I'm making a custom property. I also have one for icon, so you can choose what icon shows up here just in case if you don't want a warning icon, you just want a little message icon, a note or something you can do that.

[00:03:24]
This could hook under your whole icon system, those icons could be web components, however you want to do it so. All right, all good so far, and then this was the part name shadow parts. This is how you get that button. Okay, so I'll walk through it. So I just have this.

[00:03:44]
I have the CSS, but there's a way in your web component, and I'll kind of get down to here. Going all the way down. And I added this part equals button and just that like one little line of code makes a huge difference because you're basically saying, this is a part that you can style.

[00:04:11]
And then in your CSS use reference the pseudo-element part button, so hey custom alert give me the part named button. And the result is I can style that button and submit a form Apparently so. Yeah, so anyway, so you can style that button right there in the browser or right there from your CSS file.

[00:04:45]
If that part has been offered. So this is kind of one of the newer bits to shadow do and stuff like that. So I don't see it that often being offered but I think it's a really great way to be like, not just like we have themes, not just we have variables.

[00:05:01]
But if you really wanna mess with this part, go ahead. And I've seen like really radical things like for like SVG is like you could just supply your own path. Or something like that it's kind of cool options tthere. I think this is a really good solution. But again, your mileage may vary.

[00:05:24]
I don't know your system and your problems you're trying to solve.
>> Does it continue down the tree like so if that button had a child, would you be able to style that if you could access the parent?
>> We could try I think you're saying a child part in a totally different component, maybe or-

[00:05:46]
>> Well, if you selected the button by its name of button. But then if that button had a paragraph tag in it or something or a span, could you reach that span then since you already have control the parent?
>> Like a child, okay, like tried selecting inside the button, we can try that here let's go.

[00:06:04]
[LAUGH] Let's get dangerous, we can put a span inside of a button, right? Span, and right, and I think the answer is gonna be no, but so are you thinking like button span or do you want put it on the outside or I was.
>> My intuition is on the outside but either or I suppose because.

[00:06:29]
>> It does not look like that works, and that's kind of the thing with web components, is they sort of only let you in and then say that's as far as you can get. So you got in the door, but it's very specific about what you can style, so.

[00:06:45]
>> Have you tried it on the inside and two doors?
>> Here? I would expect it to be the same, but maybe we need a different style for it. But, yeah it doesn't like go through and we can't like so yeah so it's too bad that'd be cool yes.

[00:07:10]
>> So could you just put just styles in that block that's right there?
>> Could I put in which block?
>> Just put another style to see if it affects the span with the current selector.
>> It's so like you mean like a whole other blocker or like add another stone, okay yeah let's let's do that

[00:07:36]
>> [SOUND] I think like coz, this is actually looking for the park name that, so I think it probably have to go on the outside, what I mean? So orange important, like that? Or maybe I'm not understanding where.
>> Without the less than span.
>> Okay?
>> The span inside the brackets is nothing which that's, right?

[00:08:06]
>> Okay, so you're putting span in here. Okay, yeah I mean yeah okay we can try that yeah. No so yeah it's frustrating, and that's like again the foot gun it's the loss of control, it's the, I'm good at CSS, I don't know how to grant that like I'm built my life on like drinking things out.

[00:08:29]
But all of a sudden, like doesn't work exactly but name show parts are a way to at least offer up our piece of the puzzle.
>> Yeah, that's what people are saying in the chat is that you just have to make multiple parts to expose more pieces of your elements.

[00:08:47]
>> Yeah, and so I can show I have that podcast player when I have. Yeah, here we go. This is my late version, it's kinda hidden. I guess one thing I was looking at for like a podcast player, right? You wanna like move buttons around wherever you want.

[00:09:09]
I think it's on the shop talk version, so that's my fault. But you want to move things around you want to style things a little bit different. Maybe I just want to delete a button entirely or something like that. And so, I named gave all of the parts names and you're able to move and delete and every single button in the little podcast player UI.

[00:09:29]
It's pretty cool. It works pretty effectively. And even there's, you could in theory just kind of change it quite dramatically. So, yeah.