Using Web Components the Smart Way
July 6, 2025Using 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 withthis.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.
Blog
Laravel 12.16.0 - New Features for Developers
Jun 03, 2025
Laravel 12.16.0 - New Features for Developers 1. New Validation Rule: in_array_keys You can now validate that an array contains at least one of the...
Supercharge Your PHP Enums with archtechx/enums
Jul 01, 2025
Supercharge Your PHP Enums with archtechx/enums PHP 8.1 introduced native enums—type‑safe sets of named values like statuses or roles. The arch...
React Hooks Complete Guide
Jul 01, 2025
🎣 Complete React Hooks Guide with Practical Examples 🧠useState What it does: Adds local state to a function component. Code Example: impo...
How OAuth Works
Jun 29, 2025
How OAuth Works OAuth is a protocol that allows third-party applications to access user data without sharing passwords. It's the backbone of secure a...
React Labs: View Transitions & Activity
Jun 17, 2025
React Labs: View Transitions & Activity Published April 23, 2025 by Ricky Hanlon. React Labs is sharing two new experimental featu...
Guide to Scroll‑Driven Animations with CSS
Jun 26, 2025
Guide to Scroll‑Driven Animations with CSS CSS animations can now be linked to user scrolling without any JavaScript — just pure CSS. 1. Thr...
