web-components

name	web-components
description	Native Web Components, custom elements API, Shadow DOM, HTML templates, slots, lifecycle callbacks, and framework-agnostic design patterns
layer	domain
category	frontend
triggers	["web component","web components","custom element","custom elements","shadow dom","html template","slots","shadow root","framework agnostic","lit element","web component library"]
inputs	["Component requirements (behavior, styling, API surface)","Framework interop needs (React, Vue, Angular, vanilla)","Browser support targets","Whether to use Shadow DOM or light DOM"]
outputs	["Custom element implementations","Shadow DOM styling strategies","Slot-based composition patterns","Framework wrapper code","Testing setup"]
linksTo	["css-architecture","design-systems","typescript-frontend","testing-patterns"]
linkedFrom	["react","vue","svelte"]
preferredNextSkills	["design-systems","testing-patterns"]
fallbackSkills	["css-architecture","typescript-frontend"]
riskLevel	low
memoryReadPolicy	selective
memoryWritePolicy	none
sideEffects	["May add custom element definitions to global registry","May add Lit or other web component libraries"]

Web Components Domain Skill

Purpose

Web Components are browser-native, framework-agnostic UI primitives. They work in React, Vue, Angular, Svelte, or plain HTML without any build step. This skill covers building production-quality custom elements with Shadow DOM, slots, and lifecycle management -- focusing on the platform APIs directly, with Lit as the recommended abstraction for complex components.

When to Use Web Components

Scenario	Web Components?	Why
Shared design system across frameworks	Yes	Framework-agnostic, works everywhere
Micro-frontends with different frameworks	Yes	Encapsulated, no style conflicts
Embeddable widgets (chat, payments)	Yes	Shadow DOM isolates from host page
Single-framework app (all React)	Usually no	React components are simpler within React
Simple leaf components (button, badge)	Yes	Portable, no dependencies
Complex stateful apps	No	Frameworks handle state/routing better

Key Concepts

The Three Standards

1. Custom Elements API
   - Define new HTML tags: <my-button>, <user-card>
   - Lifecycle callbacks: connectedCallback, disconnectedCallback, attributeChangedCallback
   - Must contain a hyphen: <my-thing> (single-word names reserved for future HTML)

2. Shadow DOM
   - Encapsulated DOM tree attached to an element
   - Styles don't leak in or out
   - DOM queries from outside cannot reach shadow internals
   - open mode: accessible via element.shadowRoot
   - closed mode: shadowRoot returns null (rarely needed)

3. HTML Templates & Slots
   - <template>: inert HTML parsed but not rendered until cloned
   - <slot>: insertion points for light DOM children (like React children)
   - Named slots: <slot name="header"> for multi-point composition

Patterns

1. Basic Custom Element (Vanilla)

// src/components/my-counter.ts

class MyCounter extends HTMLElement {
  static observedAttributes = ['count', 'min', 'max'];

   _count = ;
   _min = -;
   _max = ;

  () {
    ();
    .({ :  });
  }

  
  () {
    .();
    .!.()!
      .(,  .());
    .!.()!
      .(,  .());
  }

  
  () {
    
    
  }

  
  () {
     (name) {
       :
        . = (value) || ;
        ;
       :
        . = value !==  ? (value) : -;
        ;
       :
        . = value !==  ? (value) : ;
        ;
    }
    .();
  }

   () {  .; }
   () {
    . = .(., .(., val));
    .(, (.));
    .( (, {
      : { : . },
      : ,
      : , 
    }));
  }

   () { . = . + ; }
   () { . = . - ; }

   () {
     display = .?.();
     (display) display. = (.);
  }

   () {
    .!. = ;
  }
}


customElements.(, );





  {
    {
    : ;
  }
}