Web Components Guide
Beta

Web Components

The native way to build powerful user interfaces

Learn Tutorials

Built in

Web Components are built right into the browser and require no additional frameworks or JavaScript libraries to pull in. Bundle sizes will be small and loading times short.

Practical

Web Components are standard JavaScript, and so work anywhere that HTML does. If you're already using a framework, then Web Components will fit right in!

Powerful

Web Components provide new ways of building UI, like the ShadowDOM, which enables powerful new patterns for encapsulation. 

// Create a new stylesheet that can be shared by all `stop-watch` elements
const styles = new CSSStyleSheet()
styles.replaceSync(`
  :host {
    font-size: var(--font-size-3);
    font-style: italic;
  }
`)

// Define the StopWatch element Class
class StopWatchElement extends HTMLElement {
  static define(tag = "stop-watch") {
    customElements.define(tag, this)
  }

  // Give this element its own encapsulated DOM
  shadowRoot = this.attachShadow({ mode: "open" })

  // Initialize private state
  #start = Date.now()

  connectedCallback() {
    // Add the shared styles
    this.shadowRoot.adoptedStyleSheets = [styles]

    // Start the timer
    this.#tick()
  }

  #tick() {
    const milliseconds = Date.now() - this.#start
    const minutes = String(Math.floor(milliseconds / (1000 * 60))).padStart(2, "0")
    const seconds = String(Math.floor((milliseconds / 1000) % 60)).padStart(2, "0")
    const hundredths = String(Math.floor((milliseconds % 1000) / 10)).padStart(2, "0")

    this.shadowRoot.replaceChildren(`${minutes}:${seconds}:${hundredths}`)

    // Schedule next update
    requestAnimationFrame(() => this.#tick())
  }
}

// Register the element with the Custom Element Registry
StopWatchElement.define()

<stop-watch role="timer"></stop-watch>
Result