In this episode we discuss web components and their potential to revolutionize the web. Web components have been around for a while and aim to provide a standardized way of authoring front-end JavaScript, but they never really took off due to the missing parts of the spec. We explore various types of web components, the issues with JavaScript, and the challenges in picking the right approach to create a web component.
Highlights
00:00 Intro
00:10 Revolutionary or dead?
04:30 Why it's not popular yet
06:15 61 ways - What's the difference?
07:37 What to do with custom elements?
10:10 Extending built-in elements
12:01 Browser Support
16:36 Example: relative-time
20:08 Benefits
25:13 Front-end JavaScript
26:52 Customize an element
27:47 Can you expose APIs?
30:44 A step to bring Frontend and Backend together
Links
Flynt: https://flyntwp.com/
webcomponents.org: https://www.webcomponents.org/
Browser support: https://caniuse.com/?search=custom%20elements
Relative-time element: https://github.com/github/relative-time-element
More from Bleech
Blog Posts (WordPress Development)
Flynt (WordPress Starter Theme)
VRTs (Visual Tests for WordPress)
Siegfried, deploy! (YouTube Channel)
In this episode we discuss web components and their potential to revolutionize the web. Web components have been around for a while and aim to provide a standardized way of authoring front-end JavaScript, but they never really took off due to the missing parts of the spec. We explore various types of web components, the issues with JavaScript, and the challenges in picking the right approach to create a web component.
Highlights
00:00 Intro
00:10 Revolutionary or dead?
04:30 Why it's not popular yet
06:15 61 ways - What's the difference?
07:37 What to do with custom elements?
10:10 Extending built-in elements
12:01 Browser Support
16:36 Example: relative-time
20:08 Benefits
25:13 Front-end JavaScript
26:52 Customize an element
27:47 Can you expose APIs?
30:44 A step to bring Frontend and Backend together
Links
Flynt: https://flyntwp.com/
webcomponents.org: https://www.webcomponents.org/
Browser support: https://caniuse.com/?search=custom%20elements
Relative-time element: https://github.com/github/relative-time-element
More from Bleech
Blog Posts (WordPress Development)
Flynt (WordPress Starter Theme)
VRTs (Visual Tests for WordPress)
Siegfried, deploy! (YouTube Channel)