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