Web Components

Intro and in-practice

VB is a js developer at U-Next, and is enthusiastic about current and emerging web-dev ecosystem






  • Web components

    • 4 Basic apis

    • Code

  • Stencil JS

    • Intro

    • Code

Component-based web development

  • Encapsulated

    • Separation of concerns
    • Enables abstraction

  • Manage HTML-hell

  • Composable

  • Re-usable, ...

Why ❤️ Components?

Framework agnostic components?

Migrate components from one library/framework to another?

Component-level styles encapsulation?

 Web components api

Shadow dom

Custom elements


create new or extend existing HTML/custom-elements

scoped HTML and Styles aka component-level encapsulation 

HTML templates

enables to write HTML fragments not to be rendered (used to compose custom-elements)

<!DOCTYPE html>
    <template id="fancy-af-button-template">
      <button><slot /></button>

      <span>I'm fancy!</span>

  class extends HTMLElement {
    constructor() {
      super(); // always call super() first in the constructor.
      // reading custom-element's template
      const template = document.getElementById("fancy-af-button-template");
      const templateContent = template.content;

      // creates a shadow root
      const shadow = this.attachShadow({ mode: "open" });
      // attaching template to shadow-root

Dev. Exp.? Too much Boiler-plate?
Type-safety?  Reactive data-binding? 

Stencil is a compiler that generates Web Component, developed by
Ionic Framework Team

  • Virtual DOM

  • Async rendering (inspired by React Fiber)

  • Reactive data-binding (props/state)

  • JSX

  • TypeScript

  • Prerendering support

import { Component, Prop, h, Listen, State } from "@stencil/core";

  tag: "fancy-af-button",
  styleUrl: "fancy-af-button.css"
  shadow: true
export class FancyAFButton {
  @State() clickedCount: number = 0;

  @Prop() title: string;

  @Listen("click", { capture: true })
  handleClick() {
    this.clickedCount += 1;
  render() {
    return (
        <span> {this.clickedCount}</span>



By Vaibhav Kumar


Web Components: Intro and in practice

  • 364