How to build your first Lit component
Vložit
- čas přidán 23. 07. 2024
- 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 - Zábava
Check out the video as an interactive tutorial → goo.gle/word-viewer
Subscribe to never miss a video on Lit → goo.gle/Lit
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.
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.
omg such a great video, bravo!
Thank you!
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.
nobody can replace the bobdod! Andrew is his own phenomenon
Crazy. You did the same Friends Series Poster in your Photo on the wall. \o/
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?
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!
Ho can I use these components with React,svelte,vue and Ember ?
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!
You mentioned using a Lit component with Markdown. Can you point me to an example of that.
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
this is greate, thanks
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?
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.
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).
@@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?
ya exactly. we can dodge react and use lit if we want.
2:43 made me lol
Wild!
So this can replace react and vue??
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
So it a templating library?
vs htmx + hyperscript?
Why not both?
great video. I still think It is still verbose for a simple component.
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?
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!
@@YouCodeThings Thanks
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
Good video, except copying and pasting the code in makes this video very hard to follow.
Is this guy the Riddler?
it's outdated, everything to do with @property doesn't work that way anymore
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
My biggest turn off is that lit still uses class components. Get me some functional code.
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!
For me class components are actually the reason why I like Lit! :-D And full TypeScript support.
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