🧩 Web Components

Web Components = Native browser feature for custom elements

Create your own HTML tags:
  <user-card name="Alice" avatar="alice.jpg"></user-card>
  <star-rating value="4"></star-rating>
  <date-picker></date-picker>

Works like built-in elements (<video>, <select>).
No framework required.

Define new HTML elements.
Lifecycle hooks for creation, connection, etc.

customElements.define('user-card', UserCard);

Now <user-card> works in HTML.

Encapsulated DOM tree.
Styles don't leak in or out.

Component:
  #shadow-root
    <style> p { color: red; } </style>
    <p>Only I am red</p>

Page's <p> elements are not affected.

Reusable markup templates.
Not rendered until used.

<template id="card-template">
  <div class="card">
    <slot name="title"></slot>
    <slot name="content"></slot>
  </div>
</template>

Clone and use as needed.

1. Define template (HTML structure)
2. Create custom element class
3. Attach shadow DOM for encapsulation
4. Clone template into shadow DOM
5. Register with customElements.define()
6. Use in HTML like any element

connectedCallback()
  Element added to DOM.
  Set up, fetch data.

disconnectedCallback()
  Element removed from DOM.
  Clean up, remove listeners.

attributeChangedCallback()
  Observed attribute changed.
  React to changes.

adoptedCallback()
  Element moved to new document.
  (Rare)

Styles inside shadow DOM:
  Don't affect outside.
  Not affected by outside.

No more:
  "Why is my component styled wrong?"
  "Why did my component break the page?"

Light DOM:
  Regular children in HTML.
  Visible in page source.

Shadow DOM:
  Hidden internal structure.
  Encapsulated from outside.

<my-element>           ← Light DOM (user provides)
  #shadow-root         ← Shadow DOM (component owns)
    <style>...</style>
    <div>
      <slot></slot>    ← Light DOM rendered here
    </div>
</my-element>

Placeholders for content.
User provides, component places.

Component:
  <div class="card">
    <slot name="title"></slot>
    <slot name="content"></slot>
  </div>

Usage:
  <my-card>
    <h2 slot="title">Hello</h2>
    <p slot="content">World</p>
  </my-card>

Flexible composition.

Works everywhere:
  React, Vue, Angular, vanilla JS

Build once, use anywhere.
No lock-in.

Styles scoped automatically.
No CSS conflicts.
Less likely to cause CSS conflicts across pages.

Package as npm module.
Share across projects.
True component portability.

No framework needed.
Works in all modern browsers.
Progressively enhanced.

Different from React/Vue patterns.
Lifecycle methods.
Shadow DOM quirks.

Server doesn't know custom elements.
Declarative Shadow DOM helps (newer).

Custom elements and forms can be tricky.
ElementInternals API helps.

✓ Design system components
✓ Shareable across frameworks
✓ Third-party embeddable widgets
✓ Long-lived reusable components
✓ Company-wide component libraries

✗ App-specific components (use framework)
✗ Quick prototypes
✗ Teams invested in one framework

Lit:
  Google's library for Web Components.
  Simplified syntax.

Stencil:
  Compiler for Web Components.
  TypeScript, JSX.

Shoelace:
  Ready-made component library.
  Built on Web Components.

Modern browsers: Full support!
  Chrome, Firefox, Safari, Edge

Legacy (IE11):
  Polyfills available.

attachShadow({ mode: 'open' })

'open': JavaScript can access shadow root.
'closed': Can't access from outside.

Usually use 'open'.

static get observedAttributes() {
  return ['name', 'value'];
}

Without this, attributeChangedCallback won't fire.

Creating shadow DOM for every tiny thing.
Overhead adds up.
Use when encapsulation needed.