Web Development

HTML 5 Web Components Explained

With the introduction of Web Components Specification, developers could write power and modular front end applications easily without the need to use a framework.

Lim Xing Zhi

30 Aug 2019 — 2 min read

With the introduction of Web Components Specification, developers could write powerful and modular front end applications easily without the need to use a framework. It is enabling the browser to be a native and standard platform for developers who want complete control over the source code and their front end web application.

Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.
- webcomponents.org

Specification, not Framework

When we are looking at Web Components, remember this: It is a specification, not a framework. In supported browsers, we don't have to fiddle around with dependencies and build tools. It runs natively on your browser.

Complete Control over your application

Due to technical requirements, developers might sometimes prefer to build an entire framework of their. It mitigates the risk that JavaScript frameworks bring along:

We have minimal control over the direction of the framework - which features to implement first, release cycles, etc
We have to live with the constraints of the framework - the speed of the framework, build processes, etc

Web Components, on the other hand, is a native platform on supported browsers. When it is implemented properly by the browser, it provides more flexibility and control than any other JavaScript framework.

However, we do not live in a perfect world. Some browsers are still treating this specification as an afterthought and take their time to implement these features. Developers will have to use polyfills in those scenarios. A detailed list of what browsers support which features can be found here on caniuse.com.

What kind of features does it have?

Just a quick rundown of the core features.

Custom Elements lets you make declarative elements in your html and construct it in your JavaScript. They also have their life cycle events so you can control what happens when you place them on the screen, move them around, etc.

// in JS
class myElement extends HTMLElement {
  constructor() {
  class
    super();
  }
}
customElements.define('my-element', myElement);

<!-- in HTML-->
<body>
  <my-element>
  </my-element>
</body>

HTML Templates lets you re-use HTML content. These are rendered at runtime, not at load time like most HTML content. Check out this post from me about what I mean by rendering at load time.

<template id="custom-dialog-box">
  <div>
    ...
  </div>
</template>

HTML Imports. As the name says, you can import other HTML documents into your current document.

<link rel="import" href="custom-forms.html">

Shadow DOM allows you to sandbox elements that are not accessible from the main Document Object Model.

TL;DR

Web Components is a specification that allows developers to write large and modular applications without relying fully on a JavaScript framework. It runs natively in supported browsers and provides the developer with a full-fledged native environment to work with.