TLDR: Sometimes, we all need a little more flexibility. Web components are a set of APIs provided by modern web browsers that allow developers to create reusable UI components. Web components can be an advantageous technology to leverage because they are self-contained - meaning they don't rely on external libraries or frameworks. They also provide a way to encapsulate styles and behavior, making it easier to build and maintain complex UIs.
Why Web Components?
Let’s say your company’s website is already up and running- all you need to do is add a component or two. Maybe the site is built in a CMS like WordPress or Squarespace, and you want to jazz it up with JavaScript without overhauling the entire thing. What you want is a custom HTML tag, one that won’t interfere with the code that’s already there. This is where web components come in.
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 a variety of projects.
A (Very) Brief History of Web Components
In 2011, Alex Russell, a then-senior software engineer at Google, gave a talk at the Fronteers Conference in Amsterdam. In that talk, Russell acknowledged the waning power of Internet Explorer and the rising popularity of Chrome and introduced web components.
In the beginning, using a web component required a polyfill—another technology that ensured cross-browser compatibility. And in 2013, Google created a stopgap with the web component library Polymer. This library was built to provide a set of features that made it easier and faster to create custom elements, as well as to assist developers with polyfill selection.
Now, however, browsers have native compatibility. Chrome and Safari developed native implementation of web components in 2016, Firefox followed in 2018, and Edge rounded out the pack in 2020.
Web components no longer require a polyfill to work in any major browser, making them an excellent way to build reusable components in JavaScript. Polymer is now in maintenance mode (although YouTube still relies on it heavily), and Lit is the preferred library for building web components, among myriad other options.
The Battle Between Frameworks & Web Components
Web components sound great and all, but don’t frameworks do all the componentization for me?
Over the last twenty years, JavaScript frameworks like Angular, React, Vue, and Svelte have paved the way for component-based development, making it easier to build organized, scalable applications. While web components fought for native browser compatibility, JavaScript frameworks made component-based architecture more seamless than ever. As a result, entire ecosystems were built around JavaScript frameworks.
But web components haven’t disappeared. They’re in use on sites such as Salesforce, GitHub, Google Play, and YouTube. YouTube is built almost entirely with web components because of the site’s heavy user interactivity and complexity. Web components help ensure YouTube has fast runtimes because, when built on top of browser APIs and web standards, the JavaScript footprint of the design system is way lighter—which is key for site performance.
Web components are also more versatile than frameworks. Not only are they interchangeable between frameworks because of their compatibility with a variety of tech stacks, but they also offer cross-platform development and ensure brand consistency. Since web components focus on doing a singular function well, they allow us to break up a complex web app into reusable pieces that will look and function the same.
Web components can be used in one-off circumstances to spruce up an existing website—adding a banner, an interactive checklist, or an audio player. But they can also be used to build entire websites. So while frameworks need JavaScript, JavaScript doesn’t need frameworks.
The Technical Stuff
Web components are custom HTML elements with dedicated UI, style, and logic. They utilize a set of technologies to create a standard component model, which lays the foundation for the encapsulation and interoperability of components. In short, web components combine the simplicity of HTML with the power of JavaScript.
Web components are a mix of four web standards: custom elements, shadow DOM, ES modules, and HTML templates.
Custom elements make it possible to create new tags by extending HTML and attributing unique style and logic only to that new element.
The shadow DOM keeps web component attributes segmented from the main DOM. The shadow DOM hides the internal markup of the component from other scripts, meaning global CSS and JavaScript will not affect the element. This technology makes web components reusable, enhancing the value of a well-constructed web component. The shadow DOM is also optional. While the technology is available to protect your web component from global styles, it isn’t required, so if you’re looking for the web component to inherit styles from your CSS, that option is still on the table.
ES modules are a function of JavaScript itself and have contributed to the usability of web components across browsers. This technology provides a mechanism for splitting up JavaScript programs into separate modules that can be imported when needed.
The HTML template tag is used to populate the shadow DOM of a web component. The template tag can be id-ed with your web components' name and content, and style can be added directly between the opening and closing template tag. This ensures that the contents of the template tag are hidden from the DOM and will only be rendered when called on by JavaScript.
The Wrap Up
With their versatility and lightweight nature, web components are an important tool to have in your developer toolbox - so don’t forget about them.
--
Ready to Learn More?
Bitovi is a software consulting firm offering a free training on web components!
We’ll cover the basics of web components, including how to create custom elements, how to use templates to define the structure of your components, and how to use events to communicate between components. We’ll also delve into more advanced topics like using Shadow DOM to encapsulate styles and using slots to allow for more flexible content.
This is a great resource for anyone looking to learn about web components and level up their frontend development skills.
Sound interesting? Find all the details and register (for free) here: https://www.meetup.com/js-chi/events/293573432/?_xtd=gatlbWFpbF9jbGlja9oAJGE3NTcxMGQwLTU2ZjMtNDM2NS05NWFhLTk1ZmRlYmZmZmZlMQ%253D%253D
Top comments (0)