How to create a Web Component using Vanilla JS
In this video we look at creating a Web Component without the help of any framework or libraries! this allows us to dig into the deeper details of Web Components including the lifecycle events, ShadowDOM and the many issues that a library or framework abstracts away for us. Problems dealing with events and rendering become immediately apparent when looking to roll our own solution rather than using something like LitElement, Stencil, svelte, react, vue, angular or any other framework that provides an abstraction layer on top of creating a Web Component.
We look at the issues in using innerHTML to setup the UserInterface and also how tricky it is to sync the attributes and properties between the component class and the tag element on the html page.
0:00 Intro
1:26 Create Shadow DOM
2:18 Component HTML
3:55 Render using Connected Callback Life Cycle event
4:50 Define CustomElement and name it
5:30 Show Web Component on Simple Web Page
6:45 Configure properties/attributes using ObservedAttributes callback
7:45 Sync attributes/properties using AttributeChanged callback
8:30 Refresh component on property change
9:25 Define golden source as for property/attribute value
11:00 Update property programmatically
13:30 Handle Events within Component
P.S Just joined buy me a coffee :-)
https://www.buymeacoffee.com/ashotofcode
Смотрите видео How to create a Web Component using Vanilla JS онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь A shot of code 10 Март 2020, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 69,844 раз и оно понравилось 2.3 тысяч людям.