Modern Lit tutorial

[@marcelapetroli7042]

Best video I've seen about introduction to Lit! The way you explain is amazing, simple and straight to the point :D Hope your channel keeps growing! We need your content 😀

[@JadJoubran]

Thank you so much Marcela! I'm currently setting up my new KZbin studio so I can record more videos!

[@HosseinOjvar]

Such a lovely cat ;) Thanks for this introduction

[@thomas-gk9jp]

The nicest thing, for me, is that i'm currently following your JS course (at the 40 something lesson, DOM etc.) and i understood all without any major problems, thank you Jad ^^

[@JadJoubran]

Awesome, thank you so much! Enjoy the rest of the course :D

[@thomas-gk9jp]

@@JadJoubran 🙌🏻

[@jediampm]

Hi, thanks for the video, About the counter example, you dont need the requestUpdate method, i recommend you to read lit docs, on Events section where you will find a counter example. ;)

[@ElliottMarquez]

Just a heads up in the JS version of Lit, the equivalent of `@state` is: class MyCounter extends LitElement { static properties = { value: {state: true}}; handleIncrement() { this.value += 1; }

[@JadJoubran]

Thanks Elliott!

[@filipesoares2827]

Thank's Man, nice video!

[@likelyja]

Have you worked with LIT + Accessibility and how to work with Shadow? We have used Stencil and had issues with shadow and accessing ID's for aria and other accessibility challenges. Do you know of any good resources or tips on how Lion was able to work with Shadow and be accessible? Any tips would be greatly appreciated. Your video was a nice intro to LIT. We are looking to switch from Stencil to LIT. Stencil offers shadow being on or off but my understanding it LIT is just shadow.

[@JadJoubran]

If you're facing issues with other frameworks, I suspect they will be same with Lit because the problem is the shadow DOM and not the framework/library... I've heard that many developers have decided to drop using the shadow DOM (that's something you can easily do with Lit but you won't enjoy the consistency of shadow dom especially with regards to styling).. Have you checked #2 here nolanlawson.com/2022/11/28/shadow-dom-and-accessibility-the-trouble-with-aria/ and alice.pages.igalia.com/blog/how-shadow-dom-and-accessibility-are-in-conflict/ ?

[@ajgubi19]

Nice pace! Thanks a lot.

[@koruki]

hi the object syntax at 19:20 doesnt work for me, it works for string but not object, any more info or documentation?

[@JadJoubran]

lit.dev/docs/templates/expressions/

[@JadJoubran]

You need to define the properties = {...} too

[@wesleymouedineassaby1035]

Your JS course is awesome, you ve really a talent to explain things, I ve purchased also your React course, but this framework is really discouraging. I will try Lit for sure! Merci Jad! Your video is perfect 🤙🤩🥤😀

[@JadJoubran]

Thanks! Yes indeed React is quite complicated unfortunately

[@dominikhlusiak6547]

Wonderful introduction, thanks!

[@JadJoubran]

:D

[@michaels6446]

Hey Jad, very nice introduction! And great that you mentioned the common challenges with lit & web components. I liked your idea on building on top of an existing library like ing/lion, but for a beginner, it's kind of overwhelming. Could you show how you integrate and customize some of the elements provided there?

[@JadJoubran]

Thank you! I haven't used it myself though but maybe one day!

[@shubhamseth4472]

Can you tell why did you choose Lit over stencil ?

[@JadJoubran]

Not sure.. but I'm not a huge fan of JSX, I also like that there's barely any build-step for Lit. But these are all just personal reasons, stencil is probably also a great choice (I've used it indirectly via ionic).

[@shubhamrozers]

I really love your javascript course ❤️❤️❤️

[@JadJoubran]

Thank you! :D

[@thematthewyoung]

hey man. do you have any info or idea how to pass in parameters to a method that you use on the @click event binding?

[@JadJoubran]

You can define an arrow function: @click={event => someFunction(event, someOtherArgument)}

[@segfaultii]

What ALL tutorials I've looked at for LitElement and Lit do not explain well is the build step, and how to use the built output in another tech stack. Lit and stencil both are guilty of this. I've built with both and was stuck with both on how to integrate my work in my colleagues code. Lit docs just throws a wall of configuration at you while Stencil just shows their output targets. But how to actually use that in another microservice is anyones guess.

[@JadJoubran]

For Lit: you need to import the Lit library and that's it. They're web components so the browser does the rest. If you're using TS, you need to compile TS to JS.

[@aj_shela]

how to start building this locally?

[@lekka333]

Nice one Jad!

[@JadJoubran]

Thanks Paul!

[@srikanthj8085]

Hi @Jad Joubran, could you help me to get any books available to learn LIT in advanced level?

[@JadJoubran]

Hey! I don't know any Lit books unfortunately. The official docs are pretty good though!

[@srikanthj8085]

thanks @@JadJoubran for the reply . Could you help me best way to pass data from parent component to nth child component ? don't want to pass all parent components to the nth child. Could you shoot me some help documents ?

[@JadJoubran]

@@srikanthj8085 You can use something like redux or other state management library or fire an event (though usually events are used on the way up) You won't find anything Lit specific which is why you can look at state management libraries in general

[@srikanthj8085]

@@JadJoubran thank you.

[@ΒινςΜοργκαν]

the video finished and all i remember is your cat :D

[@JadJoubran]

Hahaha that's great!

[@mharding7]

Could you say more about how to use Tailwind with Lit?

[@JadJoubran]

I haven't used it myself with Lit but there seems to be some articles explaining some approaches

[@geek_24]

Beautiful Car

[@mike_mad2803]

Came for the tutorial. stayed for the mischievous orange kitty

[@yanaung7630]

tahnk you sir, what do you think of stencil compared to lit 2.0? Btw I love the cattttt

[@JadJoubran]

Thanks! I answered that question in the comments, check it out below

[@marcomarek7734]

Ahaha never seen tutorials with cats intervening. Cute

[@777shacob8]

New Jad upload 🙃

[@charlesmadureira5125]

👏🚀🎊

[@JadJoubran]

🐈🚀🥰

[@TravelingTice]

Gijsje 😍😍