JavaScript frameworks and libraries, we can all agree there are a lot of them. Angular, React, Vue, Svelte—the list seems to grow every year. But, what do they all have in common? The answer is that they are used to build applications on the web, and they provide the ability to create reusable components.
What if you could create components based on existing web standards, components that do not depend on the framework or library used to glue everything together into an application? That is where Web Components come in.
Here are a few companies you may have heard of that implement Web Components:
Logos of companies using Web Components. Google, Salesforce, Electronic Arts, Twitter, YouTube and GitHub
Google: many properties including the AMP web component framework (source)
Salesforce: Lightning Web Components (source)
Twitter: Embedded Tweets (source)
GitHub: The “Updated ago” (source)
YouTube: The site is built using Web Components (source)
Let’s dive deeper into how Electronic Arts (EA) uses Web Components. (source)
EA is one of the largest game companies with over 22 studios and 10,000 people in 30 locations all over the world. Needless to say, they release a lot of games (NBA Live, Star Wars, The Sims, Battlefield, etc).
In the beginning, the web team took the approach of designing and developing each game’s website independently, one site at a time. As you can imagine, this leads to a lack of a coherent experience for users browsing all the games EA offers. It was also difficult for the designers and developers working on the sites. They were spending 80% of their time on “Commodity Web”, (i.e. navigation, footers, and media galleries) instead of building custom experiences for each game title.
To invert that ratio, The Network Design System (NDS) was created. With the NDS, they were able to take the Commodity Web components and add:
Theming capabilities
Ability to integrate with any language and framework
Support for their Micro-site Architecture
Delivery as a User Interface as a Service (UIaaS)
And you know who else has most likely used Web Components?
You. Have you ever wondered how is it possible that you can just set the ‘src’ attribute on a <video> or <audio> and have a fully functional player with buttons, volume control, progress bar, timer, and other options? Web Components.
Let’s look at an example that’s just as easy to use, but has a lot more happening behind the scenes—the model-viewer Web Component developed by Google.
Here is the code needed to display a 3D model:
<!-- Import the component -->
<a href="https://unpkg.com/@google/model-viewer/dist/model-viewer.js">https://unpkg.com/@google/model-viewer/dist/model-viewer.js</a>
<a href="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js">https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js</a>
<!-- Use it like any other HTML element -->
<model-viewer src="shared-assets/models/Astronaut.glb" alt="A 3D model of an astronaut" auto-rotate="" camera-controls=""></model-viewer>With a simple HTML tag, you can embed a 3D model without needing to know WebGL and the WebXR Device API.
Here is the model-viewer Web Component implemented within and without a framework / library:
Hopefully seeing who is using and what can be created with Web Components now has you wanting to know how to create your own.
As stated before, Web Components are built on Web Standards. These low-level APIs consist of:
Custom Elements
Shadow DOM
HTML Templates
Custom Elements API: Allows you to register a custom element on the page.
Must include a hyphen/dash (kebab-case) i.e. my-custom-element. No single word elements to prevent name clashes.
It’s a class object that defines its behavior.
Also determines which, if any, built-in elements the custom elements extends i.e. input (HTMLInputElement), button (HTMLButtonElement), etc.
Shadow DOM API: Facilitates a method to attach a separate DOM to an element
It provides encapsulation to keep the style, structure, and behavior separate from the outside code. It helps to “...contain the gross” - Paul Lewis (source)
Allows for the remapping of events i.e. turn a click event into something more meaningful.
HTML Templates API: Creates a flexible template that will be inserted into the custom elements shadow DOM.
the
<template>element’s content is not immediately rendered. We define the HTML structure upfront and clone when needed via JavaScript.Used to efficiently render HTML and update it when the user interacts with our web component.
For more complex templates, it may be easier to use a library, framework, or tool.
Here’s an example Web Component I wrote with comments to help explain what is going on.
If you're wondering about browser support, Web Components are supported in modern browsers.
Table showing browser support for Web Components.
For older browsers, you can use polyfills: https://www.webcomponents.org/polyfills
At Vonage, we are creating Web Components to build a Design System like Electronic Arts mentioned earlier. Our goal is for users to be able to easily assemble components to build things like chat applications without having to worry about what is happening behind the scenes.
Here are some resources for more information on Web Components:
The Web Component example I made was a simple one. As the complexity of a component grows, using a tool may make development easier. In the next blog post, we’ll be comparing different frameworks and tools that create Web Components.
){kind=small}
