Web Components

Also Known As

TL;DR

Explanation

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.

Common Misconception

Why It Matters

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

Code Examples

// React-only component — unusable outside React ecosystem:
const Button = ({ label, onClick }) => (
    <button className="btn-primary" onClick={onClick}>{label}</button>
);
// Cannot use in Vue, Angular, plain HTML, or future frameworks

// Web Component — works everywhere:
class PrimaryButton extends HTMLElement {
    static observedAttributes = ['disabled'];

    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>button { background: var(--btn-bg, blue); }</style>
            <button part="button"><slot></slot></button>
        `;
    }

    attributeChangedCallback(name, _, value) {
        if (name === 'disabled')
            this.shadowRoot.querySelector('button').disabled = !!value;
    }
}
customElements.define('primary-button', PrimaryButton);
// <primary-button>Click me</primary-button> — works everywhere

References

• ↗ https://developer.mozilla.org/en-US/docs/Web/API/Web_components

Tags

Related Terms