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.
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.
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
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?
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!
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
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!
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
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!
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
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!
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
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.
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/
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
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.
great video. I still think It is still verbose for a simple component.
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!
omg such a great video, bravo!
Thank you!
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
2:43 made me lol
Wild!
vs htmx + hyperscript?
Why not both?
this is greate, thanks
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!
Good video, except copying and pasting the code in makes this video very hard to follow.
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
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
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