In this video, we build a simple-carousel using Lit, letting us explore passing child DOM (Document Object Model) into your web component and some simple web component composition. We also use the Web animation API, play with SVGs, styles, and events to make the carousel look beautiful. Finally, we use the carousel in a create-react-app just by adding the simple-carousel HTML tag we invented.

Github repository with completed simple-carousel → [ Ссылка ]

Motion Carousel Playground example → [ Ссылка ]
Lit documentation site → [ Ссылка ]
Web Animations API docs → [ Ссылка ]

Chapters
0:00 - Introduction
0:51 - Finished simple-carousel demo
Final code in a repository → [ Ссылка ]
01:20 - Lit starter kit setup
Get Node.js →[ Ссылка ]
02:20 - Defining the simple-carousel
Follow along using the Lit playground → [ Ссылка ]
03:08 - Passing in child elements
Checkpoint TS → [ Ссылка ]
Checkpoint JS → [ Ссылка ]
Rendering children with slots documentation → [ Ссылка ]
HTMLSlotElement MDN documentation → [ Ссылка ]
Shadow DOM
:slotted()
06:10 - Carousel slide-button!
Checkpoint TS → [ Ссылка ]
Checkpoint JS → [ Ссылка ]
07:12 - Using slide-button in simple-carousel
Checkpoint TS → [ Ссылка ]
Checkpoint JS → [ Ссылка ]
Events documentation → [ Ссылка ]
08:05 - SVG and styles
Checkpoint TS → [ Ссылка ]
Checkpoint JS → [ Ссылка ]
10:03 - Animations
Checkpoint TS → [ Ссылка ]
Checkpoint JS → [ Ссылка ]
Element.animate documentation → [ Ссылка ]
12:18 - Use simple-carousel in React!
Finished code Github repository → [ Ссылка ]
Create React App → [ Ссылка ]
@lit-labs/react → [ Ссылка ]
Custom Elements in React RFC → [ Ссылка ]
14:02 - Wrap up
@lit-labs/motion → [ Ссылка ]
Motion Carousel Playground example → [ Ссылка ]
Lit Github Discussions → [ Ссылка ]

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

Join the community → [ Ссылка ]
Twitter → [ Ссылка ]
Discord → [ Ссылка ]

Watch more Build it with Lit → [ Ссылка ]
Subscribe to never miss a video on Lit → [ Ссылка ]

#Lit #WebComponents #WebDevelopment

свернуть