Recap & Q&A

[00:00:00]
>> Let's recap. External styling, you could style light on. You wrote it, you style it. Style deep styling Shadow DOM, doesn't work. Global classes, doesn't work unless you go the ugly route and put these style sheets inside your web, it's fine, it's fine, it works. It's web technology all it does is make a request and it brings back CSS.

[00:00:25]
And if your CSS has already cached, the hit is zero. So if you've already requested the tailwind CSS file in the web component, it would be zero. And then global classes, okay yeah, so we can make that work. Inheritable styles? Yes, they pass through CSS variables. Yes, that's a great way.

[00:00:45]
Predefined themes. Yes, that's a great way to style. Named Shadow Parts. Yes, that's a great way. And then CSS pseudo-elements, host, host context, slotted define. These are also kind of cool tools you can use to style your web components from the inside. Or even the outside I guess in the case of defined and stuff like that.

[00:01:06]
So cool, interesting. I'm curious to see how y'all will use it, but it's just a new stuff we have to learn and now it's our job to know, so.
>> Here's a question. Could you use an attribute selector to select a part by custom property?
>> An attribute selector, like, let me find my part one.

[00:01:38]
Like custom alert. Like part, button or something. Or like.
>> No, if it was a theme, for instance, a specific theme, or it was a part like they used like the alert, the morn and then the part button.
>> Yeah, okay yeah. Yeah, okay. Theme yeah, you can totally chain this stuff, this should work.

[00:02:19]
I wrote it, I hope it does. So let's just change it to, This should work, I didn't do this right. Live coding equals warn. Let's see, come on coop in, Let me refresh my code pen. Weird, it doesn't seem to work a day, I probably messed something up, let me see.

[00:02:57]
What are you? Roll icon warning and we'll just do icon warning. There we go. Yeah so you can make this side the left side of the selector as complex as you want. So what can be kind of cool is you could kind of change the color of whatever you want.

[00:03:27]
If you have multiple alerts or something like that ,you could kind of style them differently if you needed to. So on a single page or throughout the entire system, so. You had a question.
>> Yeah based on your experience using web parts, would you say the majority of people do implement the Shadow DOM?

[00:03:46]
Kind of that's the default that most people use when they're creating web components?
>> They code stuff in there?
>> Mm-hm.
>> Yeah, I think the style tags in your web components are pretty normal. Where it's moving to, and this is kind of the future state and maybe this is just a great place to talk about it.

[00:04:14]
This is not fun, right? This is not good. We don't like this. What would be a good, let me go to a complex example and then all. Let me fork it, right? For forking pen, here we go, okay? So I'm gonna just delete all this, we don't care.

[00:04:35]
All right, so this would be our default custom alert. So where it's kind of heading is this idea where, what if I could take all this stuff? This is so much stuff. We hate this stuff, right? And what if I could put it in a CSS file somewhere, right?

[00:04:52]
And this won't work cuz it doesn't know about the stylesheet yet. But the cool thing is, you can import sheet from, this is a new CSS feature. I can import a style sheet from a style sheet as, I think it's as styles, as style I think is what it is.

[00:05:28]
And then, okay? Unexpected identifier, maybe it wants this, let's see, okay.
>> Sheet as style or sheet style from.
>> Import sheet as, as style.
>> Yeah.
>> Let me see. I thought I knew how to do this, I have a blog post on it. Let me go to my blog, everyone likes their own blog.

[00:06:00]
Everyone references their own blog, right? So I did this whole thing where I made CSS modules. You're probably familiar with something like emotion or CSS modules or style components or something that generates a robot class on your elements and IDs and stuff like that. Shadow DOM is interesting because you don't need that Robot class, that Robot class is just for scoping the style to that element, right?

[00:06:32]
So you don't need it. That's what Shadow DOM solve that same problem. But there is this idea of, what if you wanted these CSS Robot classes as type CSS? We blew it, okay, wow, okay. So that's what it is. So we can import these styles as style, and then we can actually tell our document to adopt that style sheet.

[00:07:03]
And that is all done in JavaScript, it's called CSS module scripts to not be confused with CSS module, it is very confusing. But you basically import this and you create an adopted style sheet. This produces a constructed style sheet and then you adopt the constructed style sheet. I know, it just rolls off the tongue.

[00:07:24]
So let me go steal that from myself. But I went through and I was just kinda maybe I could make these like Robot classes up and do it. Cuz I actually kinda like it sometimes or if I'm not using web components if I wanted to use Robot classes without build tools.

[00:07:42]
And I did it, so that was kind of fun. But let's go back to the place where we were importing stuff. Where's our, here. Okay, assert type equals CSS. Gosh I was way off, okay? So nothing's dying, everyone's happy, okay? And so, we can document DOP did style sheets equals sheet, right?

[00:08:12]
We're basically pushing the sheet into the adopted style sheets. And you will see here, I think I can do this. Let's do it in the regular console. It didn't do anything yet. It was very mad at me, let's see here. But you can do a document adopted stylesheets, right?

[00:08:36]
Let me go into the code pin actual and now I'll try that. No, it's a proxy, it's an array of zero and so nothing happened. That's unexpected. Well, let me see if this works. So what you can do in your element, in your constructor you can do this dot.

[00:09:07]
Let's see this is a lit element. Okay, this dot shadowroute or whatever hopefully you have, I think you get that for free inlet. You have to create it in a vanilla web component. This dash shadowRoot.adopted style sheets. So you can basically, no. Okay, so it doesn't have a shadow root yet, weird.

[00:09:43]
I'm gonna have to look into this. This is maybe a bad place to refine code here, but there is a way to basically you link the style sheets into the web component from here. I'm just missing what exactly it is. So, let me work on that in a break and we'll figure out what happens and then we'll reset like nothing happened.

[00:10:13]
No one's gonna know. [LAUGH] But so this would be the kind of modern way to do it. Again, it's not supported in every browser though and so that's like, you're stuck with link tags until that it gets resolved. So but it's pretty cool tech when it works, not how I'm doing it right now.

[00:10:35]
So,okay, questions or try renderRoot is what somebody is saying in the chat. Thank you. this.renderRoot, this would be beautiful if it worked. I think what's happening though is my browser is not ingesting the style sheet correctly.
>> Is any of this styling issues, can you get around any of these by using the libraries that make web components easier later?

[00:11:12]
I forget the other ones but.
>> Yes.
>> This at all or no.
>> Yeah, they super help with it. We'll get into it but that's actually a really great place cuz we can l get out of this disaster I'm creating. [LAUGH] Because it's pretty easy, so I'm gonna delete all this stuff I was attempting here.

[00:11:33]
And what lit offers is, I think I showed you this HTML tag template or you probably saw it. It looks a little bit like JSX. It's a little weird, but it's basically a template literal, the backticks. And you can write JavaScript inside of there. But we have HTML here, but lit offers CSS as well.

[00:11:53]
So lit has a static, I think it's styles. And then we can return CSS backtick, backtick. And now we can just relink our CSS back into here. And let's see if that works. I'm expecting that to work and I don't know that, I wonder if it's not static get.

[00:12:27]
That's what I'm thinking, right? There goes, hey, it's static get. So lit has this styles method and then it also can return. And then the CSS template literal, which turns that into a style tag kind of behind the scenes. But the way you're authoring, it is a little more like a motion or something like that.

[00:12:49]
So kind of in a standard React component kind of way.
>> Maybe superfluous, but is it possible? Have you seen people either importing the template, literal string or other ways so that developers can get the nice syntax highlighting and pretty printing and formatting in some other file? Is there?

[00:13:07]
>> Yeah.
>> Any practice from that?
>> Right, so there are Webpack vacations I think that you can do. But you know how we are trying, we're attempting so successfully to do import sheet, [LAUGH] from some stylesheet, some CSS Cert. And then type CSS I think is what we're doing.

[00:13:35]
So that's CSS modules. There is a way to do. You can import JSON from some JSON file and assert type JSON. So that can be handy. And these are native ways. You can do this Webpack and whatever, figure that out. But these would be native ways, but you could there's also talk about importing some template from some HTML as HTML.

[00:14:06]
I don't think this is out in any browsers yet, but it's I think actively being discussed and specked out. So I think it's real close. This whole assert type equals is sort of just to allow us to inject whatever we want, so. So that's on its way. It is not here yet that I know of, but that is kind of the future.

[00:14:26]
So your web component may look more like just importing some things in and get really succinct as it goes forward.