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!

Lit.dev playground with tonnes of Lit examples → https://goo.gle/3ruWNfx
Lit documentation site → https://goo.gle/Lit-devsite

Tired of using only div’s; try these out:
model-viewer → https://goo.gle/3KWdZ58
brick-viewer → https://goo.gle/3ryIJ4O
chess-board→ https://goo.gle/37ZPzJE
playground-element→ https://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 https://goo.gle/3ruWNfx
More about the html tag function and Lit templates → https://goo.gle/38lA0fk
04:40 Property decorator and attributes
Checkpoint TS → https://goo.gle/37Nyse2
Checkpoint JS → https://goo.gle/3OzlHEx
06:34 Lifecycle and changing the word
Checkpoint TS → https://goo.gle/3kb3MWR
Checkpoint JS → https://goo.gle/3MvmHaS
Lifecycle documentation → https://goo.gle/3ESXfJV
08:12 Styles and events!
Checkpoint TS → https://goo.gle/3LidGC2
Checkpoint JS → https://goo.gle/3KgA4KK
Styles documentation → https://goo.gle/3OMnztU
Events documentation → https://goo.gle/3Kg3h8k
09:53 Use this component everywhere!
Final TS Code → https://goo.gle/3OESjwD
Final JS Code → https://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 → https://goo.gle/Lit-Community
Twitter → https://goo.gle/Lit-Twitter
Github Discussions → https://goo.gle/Lit-GitHub
Discord → https://goo.gle/Lit-Discord

Watch more Build it with Lit → https://goo.gle/BuilditwithLit
Subscribe to never miss a video on Lit → https://goo.gle/Lit


#Lit #WebComponents #WebDevelopment