How to style your Lit elements

Подписаться 5 тыс.

Просмотров 9 тыс.

50% 1

How do you style a web component to suit your needs? In this episode, Lit Software Engineer Andrew Jakubowicz explains how the Shadow DOM works, illustrates the benefits of encapsulated CSS, and shows how you can use CSS inheritance, custom properties and shadow parts to build web components with flexible, public styling APIs.
The concepts and tools discussed here apply regardless of whether you’re using Lit to build your web components.
Links:
MDN Using CSS Custom Properties → goo.gle/3RzOl97
MDN part attribute →goo.gle/3CgJJA1
MDN ::part() → goo.gle/3Sk2ckN
MDN exportparts → goo.gle/3Rpv9dU
Playground Elements →goo.gle/3fpTFOK
Build an animated carousel tutorial → goo.gle/3rffdjH
Lit documentation site → goo.gle/Lit-devsite
Simple Carousel Github → goo.gle/3kmGEor
Chapters:
0:00 - Intro
1:40 - How styles behave by default with Lit
Code → goo.gle/3SkFUzx
4:45 - Inherited CSS properties
5:30 - Custom Properties
7:35 - Demo 1: Use Custom Properties to customize a Lit element
Code → goo.gle/3UKnauK
8:25 - Shadow Parts
11:20 - Demo 2: Use Shadow Parts to customize a Lit element
Code → goo.gle/3SE3irp
12:25 - Demo 3: Use Shadow Parts to style an automatic carousel
Code → goo.gle/3fvAD9W
13:12 - Showcase public styling interface of playground-element
13:50 - Recap
Have any lingering questions? Tweet at us with the hashtag AskLitDev or join the Lit community Discord!
Join the community → goo.gle/Lit-Community
Github Discussions → goo.gle/Lit-GitHub
Twitter → goo.gle/Lit-Twitter
Discord → goo.gle/Lit-Discord
Watch more Build it with Lit → goo.gle/BuilditwithLit
Subscribe to never miss a video on Lit → goo.gle/Lit
#Lit #WebComponents #WebDevelopment

Развлечения

Опубликовано:

6 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 21

@buildWithLit Год назад

Missed episode 2 of Build it with Lit? Check it out now!→ goo.gle/3E5OLkc

@klimmerjoe5195 Год назад

OMG, they're back !!! the funniest (and only) video tutorials about web-components with LIT. custom properties + ::part() seem like the future, wow. Styling web components has been THE WORST thing about my current job working with web-components and LIT html, and I actually love CSS...

@YouCodeThings Год назад

Thank you!!! What have been some of those pain points you've run into when working with web-component styling?

@PauloSantos-yu1tn Год назад

I am angular developer but I had keep a eye on lit, I really like it, very simple, very powerful. The reactive controllers are amazing. I hope this grows, because it's really fast compared to the old ones, and the code styling is really cool

@kyonas6047 Год назад

it grew. now RU-vid is using it

@KainGNX Год назад

Nice, a new video. I enjoyed building a router with Lit, but was worried Google would abandon it, as they do with other projects. More videos give hope that Lit is still supported, keep em coming. I think Lit had a lot of great potential to break into prominent fronted frameworks. There is a lot about Lit that just makes sense. Hoping for good things. Please, make more videos more often. Easier said than done, I know.

@micc1000 Год назад

Interesting, did you publish it somewhere or is it a private ?

@esperfps6628 Год назад

Thank you these videos are amazing and helping me understand lit easily

@YouCodeThings Год назад

You're welcome!

@jamiek2039 Год назад

Excellent video, thank you! There is something hilarious about your presentation 😂 and very informative at the same time!

@YouCodeThings Год назад

Thank you! :D

@jobiej7416 10 месяцев назад

This was fun

@dorialan Год назад

Thanks 🙏

@DarrenbyDesign Год назад

Legtimate question. Why don't you allow for things like templateURL and StyleURL for Lit Element Components? I think this is one of the neatest things in Angular and its something that seems perfect for Web Components

@mauricewipf1667 7 месяцев назад

It would be great to have a video on how to integrate with Tailwind CSS as it is very popular nowadays.

@arodic Год назад

Is there a way to make shadow boundary completely transparent to styles? I wish I could opt in to have the style boundary disappear while still using shadow DOM and slots/parts.

@myworld458 10 месяцев назад

how I can add tailwind css

@micc1000 Год назад

What if the shadow DOM promotion could be a disservice to Lit adoption? If you want to build a new fine, but the chances your default design will fit the parent page are poor, like the real . And need the various patterns described here. Or if inside a company, you build reusable components, that follows corporate styles, that is fine too. Lit solve these niches, but is much more than that. We use Lit as our web framework(Typescript+Mobx in Vite) to build a web app. And LOVE it. Solving the CSS issue in a more brutal way by using Tailwind and bypass the shadow DOM. There is no chance of breaking styles inside components since the CSS is just a utility, standardised and global. Converting the CSS management to a non issue. EDIT: we do not use mobx anymore, but the lit lab state management instead, and it works great !

@YouCodeThings Год назад

Regarding open-stylable shadow roots, there is a proposal that could use your input and support. Proposal: "open-stylable" Shadow Roots #909 This would allow opt-in behavior to turn off the strict style scoping while still preserving other benefits (such as slots)! Thank you!

@micc1000 11 месяцев назад

@@YouCodeThings thank you for the information, interesting to see it is a 3 year old issue already