How to build your first Lit component

Рет қаралды 34,036

Күн бұрын

Lit is a tiny library that removes the boilerplate of defining a web component. Learn how to build your first Lit component and use it with React, Vue, and in a markdown editor. Lit Software Engineer Andrew Jakubowicz explains core Lit concepts, the LitElement lifecycle, attributes, state, styles, events, and more!
Lit.dev playground with tonnes of Lit examples → goo.gle/3ruWNfx
Lit documentation site → goo.gle/Lit-devsite
Tired of using only div’s; try these out:
model-viewer → goo.gle/3KWdZ58
brick-viewer → goo.gle/3ryIJ4O
chess-board→ goo.gle/37ZPzJE
playground-element→ goo.gle/3uSfGLj
Chapters
0:00 - Introduction
01:36 - What is Lit?
02:45 - What does a Lit component look like?
03:19 - Writing our very first component
Start a blank project at goo.gle/3ruWNfx
More about the html tag function and Lit templates → goo.gle/38lA0fk
04:40 Property decorator and attributes
Checkpoint TS → goo.gle/37Nyse2
Checkpoint JS → goo.gle/3OzlHEx
06:34 Lifecycle and changing the word
Checkpoint TS → goo.gle/3kb3MWR
Checkpoint JS → goo.gle/3MvmHaS
Lifecycle documentation → goo.gle/3ESXfJV
08:12 Styles and events!
Checkpoint TS → goo.gle/3LidGC2
Checkpoint JS → goo.gle/3KgA4KK
Styles documentation → goo.gle/3OMnztU
Events documentation → goo.gle/3Kg3h8k
09:53 Use this component everywhere!
Final TS Code → goo.gle/3OESjwD
Final JS Code → goo.gle/3Mx2Ub0
11:22 - Wrap up
Have any lingering questions? Tweet at us with the hashtag #AskLitDev or join the Lit & Friends Discord!
Join the community → goo.gle/Lit-Community
Twitter → goo.gle/Lit-Twitter
Github Discussions → goo.gle/Lit-GitHub
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

Пікірлер: 41

@buildWithLit 2 жыл бұрын

Check out the video as an interactive tutorial → goo.gle/word-viewer Subscribe to never miss a video on Lit → goo.gle/Lit

@herrbasan 5 ай бұрын

Tutorials should be in JS by default. The whole Sexappeal of webcomponents is that they don't require a build step. If they feel like they have to pander to the toolchain crowd, I guess i'm better suited to do webcomponents directly.

@krisbulte8695 2 жыл бұрын

Great to see investments in this type of series. Education is what is needed in the web components space for more adoption and understanding of the web platform.

@raulmar Жыл бұрын

omg such a great video, bravo!

@YouCodeThings Жыл бұрын

Thank you!

@ThiagoLucioBittencourt Жыл бұрын

Crazy. You did the same Friends Series Poster in your Photo on the wall. \o/

@PeteCarapetyan 2 жыл бұрын

Bravo! It took years to even _begin_ replacing the amazing Rob Dodson Polycasts, presumably because it took years to find someone with Dodson's raw exuberance and goofiness. Might have happened. More! Many thanks to the google team for putting their resources in this direction.

@ElliottMarquez Жыл бұрын

nobody can replace the bobdod! Andrew is his own phenomenon

@parhammosadeqzadeh-zs2bl 4 ай бұрын

this is greate, thanks

@elson_correia Жыл бұрын

great video. I still think It is still verbose for a simple component.

@4ram16 Жыл бұрын

You mentioned using a Lit component with Markdown. Can you point me to an example of that.

@YouCodeThings Жыл бұрын

Great comment! Markdown allows html within it, and because Lit elements are html elements, you use them by writing them directly in the markdown. You will also need to import your component definitions via a script element tag somewhere. YT doesn't always allow me to paste links but here is a small sample on the Lit playground: lit.dev/playground/#gist=4eba9cbb1f19dbb6d0d41c61433ca88f

@ikbo 2 жыл бұрын

I'm a little confused why one would use lit with react when they are not complimentary technologies but rather competitors in the sense they are very opinionated on how to write components?

@YouCodeThings 2 жыл бұрын

They can definitely be complimentary! Lit's interface is tied closely to the browser's Web Component specification as LitElement extends HTMLElement. Therefore if you need to support React + Vue, and write a single component, you'd use Lit in React.

@bertolimauro 2 жыл бұрын

I find also the shadow DOM very useful if you build a "Component library" or Design system. With shadow DOM the end-user cannot change the default behaviour of the component without proper support (via slots, etc).

@ikbo 2 жыл бұрын

@@YouCodeThings I can see that being a good use case although not very common one. Does integration with React map cleanly or does it get gnarly when you have to do things reacts way?

@bipinmaharjan4090 2 жыл бұрын

ya exactly. we can dodge react and use lit if we want.

@lucasfrutig4945 2 жыл бұрын

the part him talk about the work with web components everywhere, it`s not so clear for me. I only have to past the transnpiled code in react app, for example? Where i paste it realy?

@YouCodeThings 2 жыл бұрын

As long as the `customElements.define('word-viewer', WordViewer)` code is run via a script or import, then the browser will recognize the word-viewer html tag. See video description and check out the model-viewer website. They show how easy it is!

@asdfmovie3616 Жыл бұрын

2:43 made me lol

@YouCodeThings Жыл бұрын

Wild!

@manojap6906 2 жыл бұрын

Ho can I use these components with React,svelte,vue and Ember ?

@YouCodeThings 2 жыл бұрын

Yes! See the end of the video where I use the component across a couple different frameworks including markdown. Lit elements use the browsers own interface for defining custom elements, so anywhere HTML works, Lit works! To use Lit elements with other frameworks, include your components' Javascript. Either with a script tag or by importing the javascript module containing the element. This registers the html custom element tag. Now whenever that custom html tag is encountered, the browser will use your Lit element! Let me know if you have other questions!

@Ihavetoreturnsomevideotapes 2 жыл бұрын

So it a templating library?

@bipinmaharjan4090 2 жыл бұрын

So this can replace react and vue??

@liamconverse8950 2 жыл бұрын

Yeah looks like it can do just about everything those can. And some things those can't. But actually react and vue are still better for making one cohesive application

@dyfrigshandy 11 ай бұрын

vs htmx + hyperscript?

@YouCodeThings 10 ай бұрын

Why not both?

@aj_shela 2 жыл бұрын

No one is telling (not even google) about Lit from the beginning (how to setup new Lit project from start), all pickup the starter project and create component from there Can you tell us how to setup locally from scratch?

@YouCodeThings 2 жыл бұрын

Hi! Thanks for the comment. We've got a "Getting Started" article on Lit.dev which covers various getting started options, from the lit.dev playground, to npm installing, to using the CDN. The best instructions for getting started from scratch with a starter kit can be found at: lit.dev/docs/tools/starter-kits/ If there is something additional that you're looking for, or if these options are not clear enough, please document what you want or tried in a Github Discussion post (linked in the description). This will help us improve our documentation. Thank you!

@aj_shela 2 жыл бұрын

@@YouCodeThings Thanks

@misaelpereira9679 Жыл бұрын

You can use a generator from open web components pages or you can use vite. NOTE: if using vite, remove the build config for using as a SPA, otherwise it will build as web component

@user-mc7nr1xy1q 5 ай бұрын

Good video, except copying and pasting the code in makes this video very hard to follow.

@Ihavetoreturnsomevideotapes 2 жыл бұрын

Is this guy the Riddler?

@AlexisMartinezDegiuda 3 ай бұрын

it's outdated, everything to do with @property doesn't work that way anymore

@buildWithLit 3 ай бұрын

Hello, Alexis, property should still work like this as of March 2024. If you're running into issues I recommend joining the Lit Discord at lit.dev/discord

@sharukh7860 2 жыл бұрын

My biggest turn off is that lit still uses class components. Get me some functional code.

@YouCodeThings 2 жыл бұрын

Classes are great! Components are a bundle of behavior and state, and classes are the standard JS way of describing that. Reactive properties map to class fields very naturally. And you can think of the render() method as your functional rendering implementation. We believe UI=f(state) too, and you get that with Lit classes!

@jan6347 2 жыл бұрын

For me class components are actually the reason why I like Lit! :-D And full TypeScript support.

@misaelpereira9679 Жыл бұрын

You can use Lit in a functional way like react does with "Haunted". It adds hooks like react does, but as some fellows write up, class based feels more natural for a component and you dont need to worry about hooks