Using Web Components the Smart Way

A lot of developers assume Web Components are meant to replace full SPA frameworks like React or Vue. But in reality, they're often best used to gradually enhance server-rendered HTML with just the right amount of interactivity — no overkill required.

The Problem: Overengineering

Some developers start using Web Components and immediately dive into Shadow DOM, custom render functions, and state management libraries — treating them like they’re building an entire frontend framework.

That’s not the most productive way to use Web Components. In many cases, they work best as lightweight, flexible tools to add behavior to server-side HTML.

The Solution: Progressive Enhancement

Instead of replacing your entire UI layer, you just add interactivity where it’s needed — with clean, semantic HTML already on the page.

Example: Pricing Card

Here’s an example HTML structure:

<pricing-card>
  <price-option class="monthly hidden">$9.99 / month</price-option>
  <price-option class="yearly">$99.99 / year</price-option>
</pricing-card>
  

Now let’s enhance it with some basic JS logic:

class PricingCard extends HTMLElement {
  connectedCallback() {
    this.addEventListener('change', () => {
      this.querySelector('.monthly')?.classList.toggle('hidden');
      this.querySelector('.yearly')?.classList.toggle('hidden');
    });
  }
}
customElements.define('pricing-card', PricingCard);
  

Why This Approach Works

• The HTML works even without JavaScript.
• The component is decoupled from any specific framework.
• It’s fast, stable, and cross-browser friendly.
• You control when and how components get enhanced.

Another Example: Adding Items Dynamically

Want to let users add new items to a list? Use a <template> tag:

<dynamic-list>
  <ul></ul>
  <button>Add item</button>
  <template>
    <li>New item</li>
  </template>
</dynamic-list>
  

And here’s the JavaScript to support it:

class DynamicList extends HTMLElement {
  connectedCallback() {
    this.template = this.querySelector('template');
    this.list = this.querySelector('ul');
    this.querySelector('button')?.addEventListener('click', () => {
      const item = this.template.content.cloneNode(true);
      this.list.appendChild(item);
    });
  }
}
customElements.define('dynamic-list', DynamicList);
  

How to Pass Data Into a Component

• Using data-* attributes: Access with this.dataset
• Custom events: Communicate via dispatchEvent / addEventListener
• Public methods: Call after the component is upgraded using helpers like onComponentLoad

Real-World Use Cases

• Embedding Chart.js in a Web Component that updates charts dynamically
• Stripe checkout component that loads after the Stripe script initializes
• Sharing state between components using Nanostores + vanilla components

Conclusion

You don’t need to replace your entire stack with Web Components. Use them wisely — as small, powerful, reusable UI enhancers that play nicely with the native platform.