How to build your first Lit component

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!

Tired of using only div’s; try these out:

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
04:40 Property decorator and attributes
06:34 Lifecycle and changing the word
08:12 Styles and events!
09:53 Use this component everywhere!
11:22 - Wrap up

Have any lingering questions? Tweet at us with the hashtag #AskLitDev or join the Lit & Friends Discord!

#Lit #WebComponents #WebDevelopment

[krisbulte]

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.

[herrbasan]

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.

[PeteCarapetyan]

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.

[ThiagoLucioBittencourt]

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

[ram]

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

[elson_correia]

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

[ikbo]

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?

[manojap]

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

[lucasfrutig]

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?

[LewisDev-dr]

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

[AlexisMartinezDegiuda]

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

[aj_shela]

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?

[sharukh]

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