Karthikeyan S
KS
Home Blogs
The Power of HTML - Part 8: Web Components: Custom Elements and Shadow DOM

The Power of HTML - Part 8: Web Components: Custom Elements and Shadow DOM

karthikeyan July 20, 2025 3 min read
#html#webcomponents#frontend#thepowerofhtml

What's cooking, code crafters? 🛠️ Continuing our The Power of HTML series, where we drew masterpieces with Canvas and SVG in Part 7. Now, in Part 8, we're stepping into Web Components—the native way to build reusable, encapsulated UI elements. Think custom tags like <my-button> that work anywhere, powered by Custom Elements, Shadow DOM, and more.

In 2025, Web Components are a dev's best friend for modular apps, especially with frameworks or PWAs. No need for heavy libraries—HTML does it vanilla. AI tools like ChatGPT (super for generating component starters) or Grok (fantastic for refining with encapsulation tips) make prototyping a breeze. Prompt: "Create a basic Web Component in HTML for a toggle switch." Let's component-ize your web!

Why Web Components Are the Future of Reusable UI

Web Components are a set of standards (Custom Elements, Shadow DOM, HTML Templates) letting you create your own HTML tags. They're framework-agnostic—use in React, Vue, or plain JS.

Key perks:

  • Reusability: Define once, use everywhere—like LEGO blocks.
  • Encapsulation: Shadow DOM hides styles/scripts from the main page.
  • Interoperability: Works across projects; great for micro-frontends.
  • AI Acceleration: ChatGPT can whip up templates; Grok optimizes for performance or accessibility.

Adoption is booming—sites like YouTube use them. In an AI-quick world, they enable rapid, modular builds.

Custom Elements: Your Own HTML Tags

Define with customElements.define('tag-name', class) in JS. Extend HTMLElement.

Basic lifecycle: connectedCallback() for mount, disconnectedCallback() for unmount.

Example: A simple greeting component.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Element Demo</title>
</head>
<body>
    <greeting-card name="Dev"></greeting-card>

    <script>
        class GreetingCard extends HTMLElement {
            connectedCallback() {
                const name = this.getAttribute('name') || 'World';
                this.innerHTML = `<h2>Hello, ${name}!</h2>`;
            }
        }
        customElements.define('greeting-card', GreetingCard);
    </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Use <greeting-card name="YourName">—it renders dynamically!

AI hack: ChatGPT: "Generate HTML Custom Element for a counter." Grok: "Add attribute observers for reactive updates."

Shadow DOM: Encapsulated Styles and Structure

Attach a "shadow root" to isolate component internals. Prevents global CSS leaks.

Create with this.attachShadow({mode: 'open'}); (or 'closed' for full privacy).

Enhanced example: Shadowed button.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shadow DOM Demo</title>
    <style>
        button { background: red; } /* Won't affect component */
    </style>
</head>
<body>
    <fancy-button>Click Me</fancy-button>

    <script>
        class FancyButton extends HTMLElement {
            constructor() {
                super();
                const shadow = this.attachShadow({mode: 'open'});
                shadow.innerHTML = `
                    <style>
                        button { background: blue; color: white; padding: 10px; border: none; }
                    </style>
                    <button><slot></slot></button>
                `;
            }
        }
        customElements.define('fancy-button', FancyButton);
    </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

The button stays blue—shadow protects it. <slot> projects content.

HTML Templates and Slots: Reusability Boost

Use <template> to clone content without rendering until needed.

Advanced: Multi-slots for flexible projection.

Pitfalls: Browser support is solid, but polyfill for old IE. Ensure accessibility—ARIA in shadows.

AI Integration: Prompt ChatGPT or Grok for "Web Component with Shadow DOM for a modal dialog"—they handle the boilerplate.

Exercise: Build a <star-rating> component. Start with AI-generated code and customize.

Key Takeaways and Next Steps

Like, drop your custom component ideas in comments, and follow! 🧩