Web Components

Also Known As

TL;DR

Explanation

Web Components consist of three specs: Custom Elements (define new HTML tags with custom behaviour), Shadow DOM (encapsulated DOM subtree with scoped styles), and HTML Templates (<template> for inert markup). They work in all modern browsers without any build step or framework dependency. Shadow DOM provides true style encapsulation — styles inside do not leak out, styles outside do not leak in. Framework components (React, Vue) are built on similar concepts but require the framework to render.

Common Misconception

Why It Matters

Common Mistakes

• Not calling super() in the Custom Element constructor — required before accessing 'this'.
• Manipulating attributes before the element is connected to the DOM — use connectedCallback.
• Not defining observed attributes with static get observedAttributes() — attributeChangedCallback never fires without it.
• Forgetting that Shadow DOM style encapsulation blocks external CSS — use CSS custom properties for theming.

Code Examples

// Custom element without proper lifecycle:
class BadElement extends HTMLElement {
    constructor() {
        // Missing super() call
        this.innerHTML = '<p>Content</p>'; // DOM manipulation before connected
    }
}

class UserCard extends HTMLElement {
    static get observedAttributes() { return ['name', 'role']; }

    constructor() {
        super(); // Required
        const shadow = this.attachShadow({ mode: 'open' });
        shadow.innerHTML = `
            <style>:host { display: block; font-family: sans-serif; }</style>
            <div class="card"><slot name="name"></slot></div>
        `;
    }
    connectedCallback() { /* Element added to DOM */ }
    attributeChangedCallback(name, old, val) { /* Attribute changed */ }
}
customElements.define('user-card', UserCard);

References

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

Tags

Related Terms