Web Components 101: They're Not Dead & We Know Why

Web components allow for the encapsulation of CSS and JavaScript within a custom tag. That custom tag is reusable and framework agnostic; meaning once it’s built in vanilla JavaScript, you can tweak it and recycle it across multiple projects.

While web components sound like an excellent way to bring componentization to your application, frameworks like React, Angular, and Vue seem to get all the glory these days.

Ryan Spencer, an experienced frontend developer and consultant with Bitovi, dives into the history, technologies, and use cases for web components in this Web Component 101 video.

Join Ryan as he compares web components to frameworks, creates a simple custom element from scratch, and tries it out in the browser, just to prove that web components are an excellent way to spruce up your static site or bring more functionality to your existing application.

Chapters
00:00 - 01:20 - Introduction
01:20 - 02:47 - A Brief Overview of Web Components
02:47 - 05:50 - History of Web Components
05:50 - 07:35 - Web Components vs. Frameworks
07:35 - 09:45 - A Technical Breakdown of Web Components
09:45 - 17:22 - Web Component Coding Tutorial
17:22 - 17:39 - Web Component Cheat Sheet
17:39 - 18:50 - Using Our Web Component in the Browser
18:50 - 19:54 - Wrap Up

We're always around to answer open source and JavaScript questions on Slack or in the comments below, so ask away!

Check out our open source project react-to-webcomponent. Convert react components to native Web Components. Works with Preact too!

#webcomponents #javascript #software #frameworks #shadowDOM #HTML #HTMLtemplates #ESModules #component #modularization

[NicoHeinrich]

Very good content! I just created a modal window web component and will probably never be writing another modal window functionality ever again. This is so practical and effective!