adoptedStyleSheets

[00:00:00]
>> So one common question is we went through the way to install or do styles through a link restyle sheet. That it's hard to explain, but it feels a little ugly, right? And you can't really explain it, even writing a style tag in the web component, that feels a little ugly don't know why, but it just doesn't feel right.

[00:00:26]
It's totally fine, it's valid HTML, but then we looked at importing style sheets, the new way. And we finally figured it out it took a little [LAUGH] behind the scenes camera work, but we figured it out. And I'm gonna kinda walk you through how it works as from the lit context, but just what's going on with this thing called adopted style sheets and I put the crying emoji because it caused me pain and suffering to figure this out.

[00:00:55]
But it's relatively new, so it's new to me and happy mistakes, we're figuring it out. So, import sheet, we're importing a style sheet. This is a constructed style sheet, we're importing constructed style sheet from our style sheet, our code pen, this code pen actually. But this style sheet right here is being presented as a style sheet and we're asserting its type equals CSS.

[00:01:20]
You can have other types, type equals HTML type equals JSON, JSON works in the browser today HTML does not quite yet. But then when we go down, see how we have no styles in our in our custom alert? Well, we can delete that we're not using it. But then in our connected callback, the way lit wants you to do this.

[00:01:42]
You call super connected callback, call the parent connected callback, just make sure it runs how you expect, but then this render route and that's lit way to call a shadow route, right? That's where the content renders. This render route adopted style sheets equals brackets, they're just regular brackets, brackets sheet and so that puts it into the adopts the style sheet into the shadow root.

[00:02:16]
This won't work from here, but you can use this without web components too, it's a way you can use it without web components, and you can adopt them into the document itself. Nothing's gonna happen here but if we had, that might be confusing because it like would apply to the code pen and stuff as well.

[00:02:36]
But you can adopt style sheets in native HTML now. That said this feature is not in every browser yet at the time of this talk and so it may be a full year or something before you're seeing this everywhere you go