Intro To Web Components: What They Are & How They Work

  •  2 Comments

Reusable code is the bedrock of modern web design. With every frontend framework and Sass library out there you can find solutions to any problem.

But reusable dynamic elements are still a work in progress and they’re incredible. These elements are called Web Components and they rely on specs waiting to be finalized by the W3C.

Not many developers know how web components work since they don’t get much publicity. So in this guide I’ll cover the details of web components explaining how they work, what they do, and why they might radically alter the future of frontend coding.

So What Are Web Components?

A web component is a DOM element created through reusable code. Each component is meant to save developers time when building websites that use similar elements on many pages.

These features are still experimental but are scheduled to be adopted by the W3C at some point soon.

Web Components

The idea behind web components is to create dynamic interface elements without writing custom JavaScript code or building your own libraries.

So for example, if you wanted to embed a map onto your page you could add a

tag. This would automatically pull a Google Maps embed code into your page—but only in browsers that support these features.

On the main site you’ll find dozens of pre-coded elements ready to embed at the drop of a hat. These all need to be installed and your browser needs to support the many technologies that power web components.

If you skim the Web Components intro guide it explains that components are built on four unique W3C technologies:

  • Custom elements – needed for adding new HTML elements into the DOM
  • Shadow DOM – the rules on how to create a unique DOM encapsulated by HTML markup
  • HTML imports – these let you import HTML code and reuse your components in other pages
  • HTML template – necessary for writing reusable code and declaring how it should look

Each of these features are separate and have their own specs on the W3C website. But together these specifications come together and make the idealistic concept of Web Components.

The toughest part to understand is how a component can duplicate code everywhere. This all comes from HTML imports which are still a work in progress.

But once these features are finalized you should be able to create any HTML tag you’d like and reuse it as a web component. And you could even share this code with others to create open source components. The possibilities are practically endless!

Ultimately the goal here is to reduce complexity and make development simpler. Frontend devs just want to solve problems and get their sites working. Coding can be fun, but it’s always a means to an end.

Web components are here to solve basic problems and offer quicker solutions for developers.

What Is Polymer?

Since it takes a lot of raw code to build web components it’s natural that developers want to make the process easier. This can be done through frameworks like Polymer, an open source tool for WC development.

Basically Polymer is a framework written on top of the web components APIs. It’s an abstraction layer so you can write components faster with less code.

It’s one of the few WC libraries out there and it’s maintained by the Google Chrome dev team. So this is likely to be around for the long haul, not to mention it already has a sizable chunk of users.

Polymer

Believe it or not Polymer is already used in some Google products like the new Google Sites. This may seem like an odd choice since Polymer doesn’t have as much browser support.

However you can increase support by using polyfills. You can actually find a list of official polyfills on the main site listing resources and code snippets from the GitHub repo.

If you do use Polymer alongside web component polyfills you can get large browser support for all four W3C technologies. You won’t find much support for legacy browsers like IE6, but these are the current stable browsers:

  • Google Chrome
  • Firefox
  • Edge
  • Safari 7+
  • IE11
  • Mobile Chrome(Android)
  • Mobile Safari(iOS 7+)

Smaller browsers like Opera may not support everything. But this list is full enough that you can start learning Polymer & see the results today.

If you wanna learn more check out this post covering the differences between WC & Polymer. Or if you’d like to get started with Polymer I recommend these intro tutorials:

Polymer vs. React

This debate recently blew up from this post and the many reactions from others.

The argument is that Facebook’s React library is basically a stronger alternative to Web Components. It uses its own shadow DOM and relies on React components to create much faster interfaces.

Considering that so many developers are learning React it’s quickly becoming the de facto choice for binding and custom page elements.

Web components and React both help you work towards the same goal: creating reusable elements for dynamic websites.

But there are many reasons why components would be a better choice. To even learn React you’ll need to get into npm, Gulp/Grunt, Babel, maybe JSX and some other technologies too. It’s not an easy framework to pick up.

The idea behind Web Components is exactly about the ease of use, especially with Polymer. Just pick it up and start building.

I think all serious frontend devs should probably learn both. React is no doubt a major influence on the JS community and Web Components are still moving forward with gusto.

If you only create smaller sites without much user interaction then Web Components/Polymer is the better route.

But this is a strong debate and it mostly comes down to personal opinions. There’s an excellent Stack question covering this very topic and I absolutely recommend reading that if you’re caught between these two libraries.

When in doubt & when you’re new to development I recommend Polymer over React. It’s got a smaller learning curve and you’ll see the fruits of your labor a lot sooner.

The Future & Beyond

As of this writing there’s little native support for the APIs & technologies used in Web Components. Generally they have more support in Chrome than elsewhere, but there’s a long way to go.

However if you’re willing to learn Polymer and dive into polyfills you can actually get web components running in all major browsers. This is great news for frontend developers who are willing to push boundaries and work with the newest technologies.

Since Polymer is a Google project it makes sense that it’ll be around for years to come. And if you’re willing to dive into components then Polymer is a must-use tool.

See the Pen Custom element Switcher by Takane Ichinose (@takaneichinose) on CodePen.0

If you want to be on the cutting edge of frontend development then spend some time toying with Web Components. You’ll learn a lot about reusable code and how to create valuable components that’ll eventually save you time, possibly on many different projects.

For further reading & getting started take a look over these related guides:

Newsletter

2 Comments
  1. John Landgrave Apr 18, 2:17 am

    Just a heads up, your example is using the v0 spec and the current polyfills don’t polyfill document.registerElement anymore, the v1 standard is customElements.define. Ran into this this past week.

Leave a Reply

*
* Minimum length: 20 characters