Glossary

Web Components

Web Components are a set of native browser APIs for creating custom HTML elements with encapsulated logic and styles — no framework, pure JavaScript.

Three technologies

Custom Elements — register a custom tag: <my-button>
Shadow DOM — an isolated DOM tree with its own styles that do not leak out
HTML Templates — <template> and <slot> for content projection

Example

class MyCard extends HTMLElement {
  connectedCallback() {
    const shadow = this.attachShadow({ mode: 'open' });
    shadow.innerHTML = `
      
      
    `;
  }
}
customElements.define('my-card', MyCard);

// Usage in HTML:
// Content here

Web Components vs React/Vue

Web Components are a native standard with no dependencies. React/Vue are libraries with better DX and ecosystem. They can be combined: Lit (Google) simplifies writing Web Components.