Web Components Cheat Sheet

Reference for building framework-agnostic UI with custom elements, Shadow DOM encapsulation, and HTML templates with named slots.

2 PagesIntermediateMar 10, 2026

Defining a Custom Element

A minimal component with a reactive attribute.

javascript

class UserCard extends HTMLElement {  static get observedAttributes() { return ['name']; }  constructor() {    super();    this.attachShadow({ mode: 'open' });  }  connectedCallback() {    this.render();  }  attributeChangedCallback(name, oldValue, newValue) {    if (name === 'name') this.render();  }  render() {    this.shadowRoot.innerHTML = `<p>Hello, ${this.getAttribute('name')}!</p>`;  }}customElements.define('user-card', UserCard);// Usage: <user-card name="Ada"></user-card>

Shadow DOM Encapsulation

Scoped styles that never leak in or out.

javascript

class StyledBadge extends HTMLElement {  constructor() {    super();    const shadow = this.attachShadow({ mode: 'open' });    shadow.innerHTML = `      <style>        /* Styles here are scoped to this component only */        span { background: gold; padding: 2px 8px; border-radius: 4px; }      </style>      <span><slot></slot></span>    `;  }}customElements.define('styled-badge', StyledBadge);// <styled-badge>New</styled-badge>

HTML Template & Slots

Named and default slots for content projection.

html

<template id="card-template">  <style>.card { border: 1px solid #ccc; padding: 1rem; }</style>  <div class="card">    <slot name="title">Default Title</slot>    <slot></slot>  </div></template><!-- Consumer usage with named + default slots --><my-card>  <h2 slot="title">Custom Title</h2>  <p>This goes in the default slot.</p></my-card>

Core Web Components APIs

The three specs that make up the standard.

customElements.define()- Registers a new custom element tag name mapped to a class
Lifecycle callbacks- connectedCallback, disconnectedCallback, attributeChangedCallback, adoptedCallback
Shadow DOM- attachShadow({mode}) creates an encapsulated, style-scoped DOM subtree
<template>- Inert HTML fragment parsed but not rendered until cloned into the DOM
<slot>- Placeholder inside shadow DOM where light-DOM children get projected
Custom Events- dispatchEvent(new CustomEvent(name, {detail, bubbles: true})) for component communication

Pro Tip

Custom element names must contain a hyphen (e.g. user-card, not usercard) — this spec requirement reserves all-lowercase tag names for future native HTML elements and avoids naming collisions.

Was this cheat sheet helpful?

Service Workers Cheat Sheet

Server-Side vs Client-Side Rendering Cheat Sheet

Explore Topics

#WebComponents#WebComponentsCheatSheet#WebDevelopment#Intermediate#DefiningACustomElement#ShadowDOMEncapsulation#HTMLTemplateSlots#CoreWebComponentsAPIs#OOP#CheatSheet#SkillVeris

Sri Hayavadhana Info-Tech

Professional Web Designing Services