Web components let you create custom HTML elements. You'll find web components used most frequently in modern front-end JavaScript frameworks. But "Web Components" is actually a W3C web standard and doesn't need a framework to be useful.
What Are Web Components?
Web components work like Lego for HTML. They are a collection of technologies that help make HTML more useful and reusable. For more background, check out the W3 Web Components specification and the Mozilla Developer Network's page on Web Components.
These technologies are:
- Custom elements
- HTML Templates
- The Shadow DOM
- ES Modules
Let's take a look at these in turn.
Custom Elements
Custom elements are special HTML elements that JavaScript makes more functional. They are best used to display always up-to-date data without callbacks. You can also name them anything you want.
HTML Templates
Templates are reusable chunks of HTML. They're great for items that go in multiple places or on multiple pages like headers, footers, and menus.
The Shadow DOM
The DOM is the glue that binds what you see in the browser to the HTML code The Shadow DOM is a part of the DOM that lets you keep markup, style, and functionality separated.
By using the shadow DOM, each custom element can get its own DOM. Doing this keeps styling and JavaScript functions from modifying elements that you don't want to be affected.
ES Modules
These are the special JavaScript libraries that make web components work.
One of the major advantages of web components is that you can reuse your custom HTML anywhere. Because web components are plain HTML and JavaScript, they're compatible with vanilla JavaScript apps, as well as frameworks. You can learn more at webcomponents.org.
Web Components With a Framework
The easiest way to start using web components is with a framework. Before web components were even around, Angular.js provided a similar functionality called directives. They did a lot of the same work as components, before components became a standard.
Now that components are a standard, there are other frameworks that build on the web component concept. They make using web components easier and more streamlined, as well as abstracting away much of the complexity of using low-level JavaScript.
Vue
Vue.js is a popular component-based front-end framework that is a favorite among developers. Vue is easy to learn and easy to program. The framework also makes it easy to add simple components to basic HTML websites.
React
React is a front-end framework that has been widely adopted commercially. This framework is also a favorite among developers. React is best known for simplifying web development by putting HTML, CSS, and JavaScript into a single script.
To learn more, have a look at our roundup of tutorials for learning React to make web apps.
Web Components Without a Framework
You can write web components in plain JavaScript. But it's hard to do so, especially for beginners. There are lightweight libraries that you can add to your existing code, though. They give you the ease of modern JavaScript practices without the high overhead of a full framework.
Polymer
Polymer is Google's contribution to the web component movement. It's a collection of lightweight libraries that make creating custom elements easier than with plain JavaScript. It has libraries for creating custom elements as well as templates.
Polymer has a library for polyfills to ensure compatibility with older browsers. There is also an early release of material design components to add material design to plain HTML.
Slim
Another option is Slim.js, an all-in-one library that makes it easy to add to a simple website. It streamlines the custom element creation process and provides direct access to the shadow DOM.
Stencil
Last but not least is the excellent Stencil, which gives you the best of both worlds. It's similar to React and provides a lot of the same functionality. But it gives you that framework-level functionality without locking you into a heavy-duty framework.
Stencil also pre-compiles your components, which makes them lighter. In contrast, frameworks like React load the whole framework into the browser and compile components on the fly. By the time Stencil components get to the browser, they're just vanilla JavaScript and HTML with no extra baggage.
Web Components and Web Design
One of the major hurdles of using components is the loss of design frameworks, like Bootstrap. Technically, you can use Bootstrap with a component-based website. And there is a Bootstrap port for React. But if you want to use something like Stencil or Vue, you may be unhappy with the lack of compatibility between your components and the framework.
Traditional Web Design Frameworks
The good news is that there are several design frameworks to choose from. Vaadin provides some beautiful components. For an enterprise flavor, there's OpenUI5. And as mentioned already, Google's Polymer offers Material UI components as well.
The bad news is that you won't find the same experience that you get from Bootstrap in any of those frameworks. And they're missing many elements you see in most design frameworks, like typography.
What Is the Component-Based Design Framework Approach?
A different technology, like web components, deserves a different approach. Tachyons is the best approach. It's easier to use for designers, but it can give developers a solid and clean foundation. Tachyons is mobile-first and provides a consistency of design that's subtle yet generates beautiful results.
Tachyons breaks down CSS classes to the smallest possible use. For example, this is how you create a button using it:
<a class="f6 link dim br3 ph3 pv2 mb2 dib white bg-black" href="#0">Button Text</a>
In most design frameworks, you'd give the link a class of button and another class to round the corners. In Tachyons, you choose your padding, border, color, etc. on the fly. All the abbreviations may seem complicated at first, but they follow a consistent naming pattern that's easy to learn.
The smallest possible class is an approach that doesn't work for traditional websites because it clogs your HTML classes. But with component-based architecture, you're probably going to use that same button over and over throughout your app. That means that you only need to create that button once for your whole website.
Thinking in Components
Another hurdle is getting your brain to change gears from traditional website layouts to component-based structure. There are two techniques to help you learn to think in components.
The Atomic Approach
Think of a web page as an organism. The parts like the hero section, price guide, and user reviews are like the cells of the organism. These are pieces that you can safely move to their own components, whether you reuse them or not.
The buttons, headers, and quotes are like atoms. Atoms are the smallest possible part. When it doesn't make sense to break a component down further, that's an atom. These are usually components that you'll use over and over throughout your project and possibly between projects.
The DRY Approach
Or you can just forget all that organism, cell, and atom nonsense and keep it DRY. DRY stands for Don't Repeat Yourself.
Anything, big or small, can be a component. So just write your HTML as usual. When you find something you want to reuse, like a gallery or footer, break it out into its own component.
Should You Use Web Components in Your Next Project?
The main points to consider are your team and web standards.
All major browsers have adopted web components. CanIUse rates custom components at a 93 percent adoption rate and templates at 95 percent, so they're safe to use. And there are polyfills for the few stragglers that don't support web components. That means that compliance is a non-issue.
If you have a team with no experience in frameworks or JavaScript, they may struggle to adopt this new technology. But they'd likely struggle to adopt any new technology if that was the case. And if you're alone, go for it! It's always a good idea to build up your skillset.
The hardest parts of adopting web components are the shortage of design frameworks and learning to think in terms of components. But we've covered both of those. Web components have been around since 2014, so they aren't a new technology. But they are a better technology.