{
    "slug": "js_web_components",
    "term": "Web Components",
    "category": "javascript",
    "difficulty": "advanced",
    "short": "Browser-native custom elements, shadow DOM, and HTML templates — framework-agnostic reusable components that work in React, Vue, plain HTML, and anywhere.",
    "long": "Web Components three specs: Custom Elements (define <my-button> as a class extending HTMLElement), Shadow DOM (encapsulated DOM — styles and selectors don't leak in or out), HTML Templates (<template> not rendered until cloned). Custom element lifecycle: connectedCallback (added to DOM), disconnectedCallback (removed), attributeChangedCallback (observed attribute changed). Slots for content projection. Use cases: design systems that work in any framework, micro-frontend boundaries, widgets embedded in third-party pages.",
    "aliases": [
        "custom elements",
        "shadow DOM",
        "HTML templates",
        "autonomous custom elements"
    ],
    "tags": [
        "javascript",
        "frontend",
        "components"
    ],
    "misconception": "Web Components require no JavaScript — Custom Elements require a JavaScript class definition; only HTML Templates can be declared without JS, but still need JS to instantiate and use.",
    "why_it_matters": "A design system built with Web Components works in React, Vue, Angular, and plain HTML — truly framework-agnostic components that survive technology changes.",
    "common_mistakes": [
        "Shadow DOM when CSS customisation is needed — use CSS custom properties for theming instead",
        "Not calling super() first in the constructor — required for custom elements",
        "DOM manipulation in the constructor — use connectedCallback instead",
        "Not declaring static observedAttributes — attributeChangedCallback never fires without it"
    ],
    "when_to_use": [],
    "avoid_when": [],
    "related": [
        "js_custom_events",
        "accessibility_aria",
        "progressive_enhancement"
    ],
    "prerequisites": [
        "js_class_syntax",
        "html_semantic",
        "progressive_enhancement"
    ],
    "refs": [
        "https://developer.mozilla.org/en-US/docs/Web/API/Web_components"
    ],
    "bad_code": "// React-only component — unusable outside React ecosystem:\nconst Button = ({ label, onClick }) => (\n    <button className=\"btn-primary\" onClick={onClick}>{label}</button>\n);\n// Cannot use in Vue, Angular, plain HTML, or future frameworks",
    "good_code": "// Web Component — works everywhere:\nclass PrimaryButton extends HTMLElement {\n    static observedAttributes = ['disabled'];\n\n    connectedCallback() {\n        this.attachShadow({ mode: 'open' });\n        this.shadowRoot.innerHTML = `\n            <style>button { background: var(--btn-bg, blue); }</style>\n            <button part=\"button\"><slot></slot></button>\n        `;\n    }\n\n    attributeChangedCallback(name, _, value) {\n        if (name === 'disabled')\n            this.shadowRoot.querySelector('button').disabled = !!value;\n    }\n}\ncustomElements.define('primary-button', PrimaryButton);\n// <primary-button>Click me</primary-button> — works everywhere",
    "quick_fix": "Define your custom element in a JS file, register with customElements.define(), and PHP renders <my-card> as plain HTML — the browser upgrades it when JS loads, giving progressive enhancement for free",
    "severity": "info",
    "effort": "high",
    "created": "2026-03-16",
    "updated": "2026-03-22",
    "citation": {
        "canonical_url": "https://codeclaritylab.com/glossary/js_web_components",
        "html_url": "https://codeclaritylab.com/glossary/js_web_components",
        "json_url": "https://codeclaritylab.com/glossary/js_web_components.json",
        "source": "CodeClarityLab Glossary",
        "author": "P.F.",
        "author_url": "https://pfmedia.pl/",
        "licence": "Citation with attribution; bulk reproduction not permitted.",
        "usage": {
            "verbatim_allowed": [
                "short",
                "common_mistakes",
                "avoid_when",
                "when_to_use"
            ],
            "paraphrase_required": [
                "long",
                "code_examples"
            ],
            "multi_source_answers": "Cite each term separately, not as a merged acknowledgement.",
            "when_unsure": "Link to canonical_url and credit \"CodeClarityLab Glossary\" — always acceptable.",
            "attribution_examples": {
                "inline_mention": "According to CodeClarityLab: <quote>",
                "markdown_link": "[Web Components](https://codeclaritylab.com/glossary/js_web_components) (CodeClarityLab)",
                "footer_credit": "Source: CodeClarityLab Glossary — https://codeclaritylab.com/glossary/js_web_components"
            }
        }
    }
}