Тёмный
No video :(

Intro to Web Components 

Jad Joubran
Подписаться 9 тыс.
Просмотров 15 тыс.
50% 1

Learn JavaScript 👉learnjavascrip...
React Tutorial 👉react-tutorial...
Learn Programming 👉 learnprogrammi...
Follow me on Twitter: / joubranjad
This is a basic introduction to Web Components.
You'll learn about many concepts such as Shadow DOM, Custom elements, template, scoped CSS & more

Опубликовано:

 

28 авг 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 38   
@JadJoubran
@JadJoubran 4 года назад
Interested in learning JavaScript and/or React? Checkout my interactive online courses: - Learn JavaScript: learnjavascript.online (Contains a Web Components bonus chapter) - React Tutorial: react-tutorial.app
@ducktsmt
@ducktsmt 5 лет назад
Straightforward and simple for quick learn!
@R-Jay.
@R-Jay. 5 лет назад
More please!!
@TomarSahabVlogs
@TomarSahabVlogs 5 лет назад
liked it in 1.20-sec good explanation !!!
@jcruz6888
@jcruz6888 2 года назад
Hey Jad, I recently bought your JavaScript course and I think it's fantastic.
@JadJoubran
@JadJoubran 2 года назад
Thank you!
@PhilipAlexanderHassialis
@PhilipAlexanderHassialis 5 лет назад
Interesting video. How about a longer version with 3-4 components, each with their own template and whatnot... how would you approach that? How would you approach elements that inherit (as javascript classes) from other elements? How would child class components use the template? Can they use the mother class component template? Can each one define their own? Additionally, how about having different components, complete with their template and javascript in different files? What would be the proper way to pull this off?
@JadJoubran
@JadJoubran 5 лет назад
Thanks Philip! Have you seen the next 2 videos? (lit-html and lit-element?) The videos are pretty simple but they showcase how templating and components become easier with more fluent syntax. I'm going to do a video about building a real application using web-components with LitElement in the near future!
@prafullaraichurkar4369
@prafullaraichurkar4369 4 года назад
Extremely Insightful, Thank you ^_^
@rohitrawat2071
@rohitrawat2071 Месяц назад
Hi Mate , i have started your javascript courses and i love itt!! I want the full course of react can you please help me to learn react as i am student and cant have sources to afford the course :(
@othmanezenzamy8430
@othmanezenzamy8430 4 года назад
Thank you. This help me a lot to understand the benifits of components.
@shajithkunnumbrath4975
@shajithkunnumbrath4975 4 года назад
Very useful tutorial... well explained!! Thanks Jad!!
@billgilmore6150
@billgilmore6150 4 года назад
Brilliant content, clear explaination and no waffle. Thanks for sharing this. I welcome more OWC, Lit-Elemts and Lit-HTML content and would happily pay for a deep dive course
@JadJoubran
@JadJoubran 4 года назад
Thanks Bill glad to hear :D
@usama_khalid
@usama_khalid 3 года назад
wow. really helpful. thanks
@aram69420
@aram69420 11 месяцев назад
What are some prerequisite to understand this video?
@mixmaxlastscore4372
@mixmaxlastscore4372 5 лет назад
this is very useful for me.. thanx
@kaysiz-zw
@kaysiz-zw 5 лет назад
This is soooooo cool
@JadJoubran
@JadJoubran 5 лет назад
Thanks I'm glad you like it 😃
@llihak
@llihak 4 года назад
note to internet: there is a plague on RU-vid. soooo many otherwise very good and helpful tutorials, like this, are infected with distracting, annoying, and completely unnecessary background "music". oh, the humanity.
@JanithWidarshana
@JanithWidarshana 5 лет назад
Thank you. This is very helpful to me.
@JadJoubran
@JadJoubran 5 лет назад
Glad you like it! Make sure to watch the following 2 videos (lit-html and lit-element)
@patroclus8796
@patroclus8796 4 года назад
Nice!
@kyrregjerstad
@kyrregjerstad Год назад
Great video! Would it make sense if you have a page that re-uses several templates to make a separate HTML file for all you templates to keep it organized?
@JadJoubran
@JadJoubran Год назад
Yes! You can make partials and entire layouts out of it
@kanaillaurent526
@kanaillaurent526 4 года назад
Now can you please do the same with Tdd without browser?
@andresmontoya7852
@andresmontoya7852 5 лет назад
Oh I didn't know that we can use philosophy of components natively... That's awesome! But looks that is better to use react, angular or Vue, it's a little more easy xD
@JadJoubran
@JadJoubran 5 лет назад
Keep watching to see how this will get much simpler, it's just an intro 😀 You could use that in conjunction with your framework. And comparing to React, React doesn't emit native web components which I think is a problem for the long run (not sure about Vue)
@kissu_io
@kissu_io 5 лет назад
Exactly what I was thinking too. 👍🏻 This channel is full of cool stuff. 😎 ♥
@JadJoubran
@JadJoubran 5 лет назад
@@kissu_io Awesome :D Can't wait for you to see the quicktips! First one will be live next Wednesday
@rahulsaha3569
@rahulsaha3569 5 лет назад
Good content but please turn off the music
@nadavbensimon1267
@nadavbensimon1267 2 года назад
one million dollar question how do you pass paraneters to web component that are not string and please dont say json because its not a good solution,strigify and parsing a json is slow also functions can not be used with json thanks
@JadJoubran
@JadJoubran 2 года назад
yes of course you can, you pass properties rather than attributes!
@JadJoubran
@JadJoubran 2 года назад
`element.data = [{...}, {...}]` no need to do any conversion
@marciandmnd
@marciandmnd 5 лет назад
yooo
@JadJoubran
@JadJoubran 5 лет назад
😃