Framework-Free UI with Web Components

coding Nov 01, 2025 10 min read

Learn what Web Components are, their advantages, naming rules, and how to build a reusable design system that works seamlessly in React, Vue, Angular, WordPress, and plain HTML.

🧩 What Are Web Components?

Web Components are a set of native browser APIs that let you create custom, reusable HTML elements — your own tags — with encapsulated structure, style, and behavior.

Example:

<user-card name="Alice"></user-card>

it behaves like a real <div> or <button>, but defined entirely by you.

🚀 Key Features of Web Components

Feature	Description
🧱 Custom Elements	Create your own HTML tags (`<my-card>`, `<todo-list>`)
🎭 Shadow DOM	Encapsulates styles and DOM — no CSS leakage in or out
🧩 HTML Templates	Reuse HTML chunks easily
🔗 ES Modules	Import/export Web Components as modern JavaScript modules
♻️ Reusability	Use the same component anywhere — no framework needed
⚙️ Lifecycle Callbacks	`connectedCallback`, `disconnectedCallback`, etc. for lifecycle control
🌎 Native Support	Runs in all modern browsers (Chrome, Firefox, Edge, Safari)

⚙️ Official Naming Rules for Web Components

naming Web Components has a few strict rules defined by the HTML Custom Elements specification to ensure they don’t conflict with native HTML tags.

✅ 1. Must contain a hyphen (-)

This is mandatory.

✅ my-button
✅ user-card
✅ app-todo-list
❌ button (invalid — conflicts with <button>)
❌ todo (invalid — no hyphen)

💡 The hyphen prevents clashes with existing or future native HTML tags.

✅ 2. Cannot start with certain reserved prefixes

Avoid starting with:

xml-
xsl-
svg-

These are reserved for system use and XML-based namespaces.

✅ 3. Must be all lowercase

Custom element names are case-insensitive, so always use lowercase:

✅ user-profile
❌ UserProfile

✅ 4. Cannot contain spaces or special characters

Only letters, digits, and hyphens are allowed.

✅ app-nav-bar
❌ app_nav_bar
❌ app.nav.bar

✅ 5. Cannot be a single word

A single word (like <todo>) is invalid — it must be compound (e.g., <todo-item>).

✅ 6. Should be semantically descriptive

Although not required, good names follow a pattern like:

<namespace>-<component>

Examples:

app-header
shop-cart-item
ui-modal
user-avatar
profile-card

This makes your components more understandable and avoids naming collisions in large projects.

🧩 Example of Correct Usage

class UserCard extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<div>Hello, ${this.getAttribute('name')}</div>`;
  }
}

customElements.define('user-card', UserCard);

✅ Valid tag:

<user-card name="Alex"></user-card>

⚠️ Invalid Examples

Name	Why invalid
`button`	Conflicts with native tag
`UserCard`	Must be lowercase
`app_card`	Underscore not allowed
`app`	Needs a hyphen
`xml-widget`	Reserved prefix

🧠 Bonus Tip:

If you’re publishing components (e.g., via npm), it’s a good practice to namespace them:

myapp-button
myapp-card
myapp-list

✅ Advantages (Pros)

1. Framework-agnostic

You can use Web Components with any frontend stack — Vue, React, Angular, or even plain HTML.

🧠 They’re just native HTML elements, so any framework that renders HTML can use them.

2. Encapsulation

CSS and DOM are completely isolated thanks to the Shadow DOM:
No global CSS conflicts
Safe to use in any environment (e.g., WordPress themes)

3. Reusability

Once built, your component can be dropped into:

a static HTML pag
a React app
a WordPress block
a Webflow embed
Without rewriting or refactoring.

4. Performance

Because they’re browser-native, they have no framework runtime overhead. The browser handles everything directly — lightweight and fast.

5. Future-proof

Web Components are part of the web platform itself — not tied to a specific framework version or library lifecycle.

6. Interoperability

They work across frameworks:

Vue 3 → <my-widget></my-widget>
React → <my-widget />
Angular → <my-widget></my-widget>
WordPress → <my-widget></my-widget>

⚠️ Disadvantages (Cons)

Drawback	Description
🧠 Complex State Management	No built-in reactive state like React/Vue — must handle manually
🧩 Tooling Ecosystem	Fewer tools, plugins, and patterns than big frameworks
🧵 Communication	Data passing (props, events) can be more verbose
🧰 SSR (Server-Side Rendering)	Not natively supported — frameworks handle SSR better
🧠 Learning Curve	Understanding Shadow DOM, slots, lifecycle takes time
⚡ Older Browser Support	IE11 doesn’t support it (requires polyfills)

🧭 When to Use Web Components

✅ Great for:

Design systems / UI libraries (e.g., reusable buttons, modals)
Embeddable widgets (e.g., chat widgets, payment forms, dashboards)
Multi-framework projects (e.g., company uses Angular + Vue + React)
CMS integrations (WordPress, Webflow, Wix, etc.)
Web apps that need reusable vanilla components

❌ Not ideal for:

Apps requiring deep state management (React/Vue handle that better)
Complex routing or SSR needs (Next.js / Nuxt handle that)
When you’re already committed to a specific framework ecosystem

🌐 Can You Use Web Components With…

Platform / Framework	Support	Notes
Vanilla HTML/CSS/JS	✅ Native	No setup — just import the component
WordPress	✅ Yes	Use `<script type="module">` in block/theme — great for custom elements
Webflow	✅ Yes	Add via “Embed” blocks — load JS via CDN or custom code
Vue 3	✅ Yes	Works as native elements; just ensure props/events are handled properly
React	⚠️ Partial	Works, but React treats Web Components differently (props/events may need manual wiring)
Angular	✅ Excellent	Built-in support for custom elements (Angular Elements use same spec)

🧠 Example Integration in Each Environment

🔹 Vanilla HTML

<script type="module" src="./todo-list.js"></script>

🔹 React

function App() {
  return <todo-list></todo-list>;
}

If you need to pass props/events, use ref and addEventListener

🔹 Vue 3

<script setup>
import './todo-list.js';
</script>

🔹 WordPress

You can enqueue your component like this in functions.php:
wp_enqueue_script('todo-list', get_template_directory_uri() . '/components/todo-list.js', [], null, true);

Then use:

<todo-list></todo-list>

🏁 Summary

Category	Details
Core Tech	Custom Elements, Shadow DOM, Templates, ES Modules
Main Benefit	Reusable UI across all frameworks
Best For	Widgets, design systems, multi-framework projects
Limitations	Less built-in state/reactivity, limited SSR
Compatibility	Works with Vue, React, Angular, WordPress, Webflow, and vanilla HTML

⚖️ Web Components vs React vs Vue (and Angular)

🧩 Category	🌐 Web Components	⚛️ React	🟢 Vue 3	🅰️ Angular
Core Concept	Native browser APIs to create custom HTML elements	Virtual DOM with declarative UI via JSX	Template-based reactive UI	Full-featured framework with TypeScript and DI
Language / Syntax	Plain JS, HTML, and CSS	JavaScript / TypeScript with JSX	HTML templates + reactive composition API	TypeScript
Performance	🏎️ Native, minimal overhead	⚡ Good, but uses virtual DOM diffing	⚡ Excellent with optimized reactivity	⚡ Great but heavier runtime
Bundle Size	🪶 Very small (no framework runtime)	⚖️ Medium (~30–50 KB)	⚖️ Medium (~30 KB)	🧱 Large (~150 KB+)
Learning Curve	🟡 Moderate — must learn Shadow DOM, lifecycle, events	🔴 Moderate-High — JSX, hooks, state management	🟢 Easy-Moderate — templates are intuitive	🔴 High — many concepts (modules, DI, RxJS)
Reactivity / State Management	❌ Manual (use JS classes or libraries like Lit, Signals, or RxJS)	✅ Built-in with hooks & state	✅ Built-in reactivity (Composition API)	✅ Built-in (RxJS, services)
DOM Handling	✅ Real DOM	⚙️ Virtual DOM	⚙️ Virtual DOM + fine-grained reactivity	⚙️ Virtual DOM
CSS Encapsulation	✅ Native Shadow DOM scoping	❌ Scoped via CSS-in-JS or modules	✅ Scoped styles in SFCs	✅ View encapsulation
Data Binding	⚙️ Manual (attributes/events)	✅ One-way	✅ Two-way (`v-model`)	✅ Two-way (`[(ngModel)]`)
SSR (Server-Side Rendering)	❌ Not natively supported	✅ Next.js / frameworks	✅ Nuxt.js	✅ Angular Universal
Tooling / Dev Ecosystem	🟡 Limited but growing (Stencil, Lit, Hybrids)	🟢 Mature (React DevTools, CRA, Next.js)	🟢 Mature (Vue DevTools, Vite, Nuxt)	🟢 Mature (CLI, schematics)
Browser Support	✅ Native in all modern browsers (polyfill for old IE)	✅ All modern browsers	✅ All modern browsers	✅ All modern browsers
Framework Independence	🥇 Yes — pure web standard	❌ No	❌ No	❌ No
Integration in CMS (WordPress/Webflow)	✅ Very easy (native HTML tags)	⚠️ Needs bundling/transpilation	⚠️ Needs build setup	⚠️ Needs full app integration
Best Use Case	Reusable widgets, design systems, micro frontends	Full SPA, UI with dynamic data	Full SPA or progressive enhancements	Enterprise-scale apps
Community & Ecosystem	🟡 Smaller but W3C-standardized	🟢 Massive	🟢 Large and friendly	🟢 Enterprise-focused
Learning Resources	🟡 Medium (fewer tutorials)	🟢 Huge community	🟢 Very large	🟢 Extensive docs
Future Stability	🟢 High — built into browsers	🟢 High — constantly maintained	🟢 High — official support	🟢 High — Google-maintained

🧠 Quick Takeaways

✅ Use Web Components When:

You need reusable, framework-independent UI (e.g., share across React + Vue + Angular apps).
You’re building widgets, dashboards, or CMS embeds (like <user-chat> or <price-widget>).
You prefer no build step and want to ship pure HTML/JS/CSS.

⚛️ Use React When:

You want large community support, rich ecosystem, and SSR (Next.js).
You need fine-grained control over state and data flow.
You’re building a modern SPA or dashboard.

🟢 Use Vue 3 When:

You like template-based syntax and reactive state out of the box.
You want a balance between simplicity and power.
You prefer cleaner code and great DX (Developer Experience).

🅰️ Use Angular When:

You’re building large, enterprise-scale applications.
You need strict typing, dependency injection, and official structure.
You prefer a complete solution (routing, forms, HTTP, testing).

🌍 Hybrid Strategy (Best of All Worlds)

Many companies now mix Web Components with frameworks:
Design Systems: build UI atoms (e.g., <ui-button>, <ui-modal>) as Web Components → use in React/Vue/Angular apps.
CMS Widgets: embed reusable Web Components into WordPress or Webflow sites.
Micro-frontends: teams use different frameworks but share the same Web Components.

Mini Design System

let’s build a mini design system using Web Components that works everywhere (React, Vue, Angular, WordPress, Webflow, or plain HTML).

We’ll create 3 reusable UI elements:

<ui-button> — styled button
<ui-card> — content card
<ui-modal> — modal dialog

All built with native Web Components, no frameworks or build tools.

🧱 1️⃣ Base Setup — ui-button.js

class UIButton extends HTMLElement {
  static get observedAttributes() {
    return ['variant'];
  }

  constructor() {
    super();
    this.attachShadow({ mode: 'open' });

    this.shadowRoot.innerHTML = `
      <style>
        button {
          font-family: system-ui, sans-serif;
          font-size: 1rem;
          padding: 8px 16px;
          border: none;
          border-radius: 8px;
          cursor: pointer;
          transition: background 0.2s ease;
        }

        button.primary {
          background: #007bff;
          color: white;
        }

        button.primary:hover {
          background: #0056b3;
        }

        button.outline {
          border: 2px solid #007bff;
          color: #007bff;
          background: transparent;
        }

        button.outline:hover {
          background: #e8f0ff;
        }
      </style>
      <button class="primary"><slot></slot></button>
    `;
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'variant') {
      const btn = this.shadowRoot.querySelector('button');
      btn.className = newValue || 'primary';
    }
  }
}

customElements.define('ui-button', UIButton);

✅ Use it:

<ui-button>Primary</ui-button>
<ui-button variant="outline">Outline</ui-button>

🧩 2️⃣ ui-card.js

class UICard extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          border-radius: 12px;
          box-shadow: 0 2px 5px rgba(0,0,0,0.1);
          background: white;
          padding: 16px;
          font-family: system-ui, sans-serif;
        }

        ::slotted(h3) {
          margin-top: 0;
        }

        ::slotted(p) {
          color: #555;
        }
      </style>
      <slot></slot>
    `;
  }
}

customElements.define('ui-card', UICard);

✅ Use it:

<ui-card>
  <h3>Title</h3>
  <p>This is a reusable card.</p>
</ui-card>

🪟 3️⃣ ui-modal.js

class UIModal extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });

    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: none;
          position: fixed;
          inset: 0;
          background: rgba(0, 0, 0, 0.5);
          justify-content: center;
          align-items: center;
        }

        .modal {
          background: white;
          border-radius: 12px;
          padding: 20px;
          max-width: 400px;
          width: 90%;
          box-shadow: 0 2px 10px rgba(0,0,0,0.3);
          animation: fadeIn 0.3s ease;
        }

        @keyframes fadeIn {
          from { transform: translateY(-10px); opacity: 0; }
          to { transform: translateY(0); opacity: 1; }
        }

        button {
          background: #007bff;
          color: white;
          border: none;
          border-radius: 6px;
          padding: 6px 12px;
          cursor: pointer;
        }

        button:hover {
          background: #0056b3;
        }
      </style>
      <div class="modal">
        <slot></slot>
        <div style="text-align:right; margin-top:1em;">
          <button id="closeBtn">Close</button>
        </div>
      </div>
    `;
  }

  connectedCallback() {
    this.shadowRoot.querySelector('#closeBtn').addEventListener('click', () => this.close());
  }

  open() {
    this.style.display = 'flex';
  }

  close() {
    this.style.display = 'none';
  }
}

customElements.define('ui-modal', UIModal);

✅ Use it:

<ui-button id="openModal">Open Modal</ui-button>
<ui-modal id="myModal">
  <h3>Hello!</h3>
  <p>This is a reusable modal component.</p>
</ui-modal>

<script type="module">
  import './ui-button.js';
  import './ui-modal.js';
  import './ui-card.js';

  const modal = document.getElementById('myModal');
  document.getElementById('openModal').addEventListener('click', () => modal.open());
</script>

⚙️ File Structure Example

/components/
  ui-button.js
  ui-card.js
  ui-modal.js
index.html

💡 Integration Examples

✅ Vanilla HTML

<script type="module" src="./components/ui-button.js"></script>
<ui-button>Click Me</ui-button>

✅ Vue 3

<template>
  <ui-button>Click Me</ui-button>
  <ui-card><h3>Hello Vue</h3><p>Using Web Components!</p></ui-card>
</template>

<script setup>
import '../components/ui-button.js';
import '../components/ui-card.js';
</script>

✅ React

import '../components/ui-button.js';
import '../components/ui-modal.js';

export default function App() {
  return (
    <>
      <ui-button id="openModal">Open</ui-button>
      <ui-modal id="myModal">
        <h3>Hello React</h3>
      </ui-modal>
    </>
  );
}

For events in React, use ref and addEventListener (React doesn’t natively handle custom events).

🧠 Why This Is Powerful

Benefit	Description
💎 Reusable	Works across React, Vue, Angular, Webflow, and WordPress
🧱 Encapsulated	CSS and DOM scoped via Shadow DOM
🚀 Fast	No framework overhead
🧩 Composable	Components can use each other easily
🌍 Deploy Anywhere	Drop in as simple `<script type="module">`

Conclusion

Web Components are the future of reusable, framework-independent UI.
They bring encapsulation, reusability, and interoperability — all powered by native browser APIs.
Whether you’re building a design system, widget, or micro frontend, Web Components help you write once and use anywhere.
⚡ In short: Write once, use everywhere.
Build UI that’s truly universal — no frameworks required.

#web-components #frontend #vanilla-js #react #vue

Framework-Free UI with Web Components

🧩 What Are Web Components?

🚀 Key Features of Web Components

⚙️ Official Naming Rules for Web Components

✅ 1. Must contain a hyphen (-)

✅ 2. Cannot start with certain reserved prefixes

✅ 3. Must be all lowercase

✅ 4. Cannot contain spaces or special characters

✅ 5. Cannot be a single word

✅ 6. Should be semantically descriptive

Examples:

🧩 Example of Correct Usage

✅ Valid tag:

⚠️ Invalid Examples

🧠 Bonus Tip:

✅ Advantages (Pros)

1. Framework-agnostic

2. Encapsulation

3. Reusability

4. Performance

5. Future-proof

6. Interoperability

⚠️ Disadvantages (Cons)

🧭 When to Use Web Components

✅ Great for:

❌ Not ideal for:

🌐 Can You Use Web Components With…

🧠 Example Integration in Each Environment

🔹 Vanilla HTML

🔹 React

🔹 Vue 3

🔹 WordPress

🏁 Summary

⚖️ Web Components vs React vs Vue (and Angular)

🧠 Quick Takeaways

✅ Use Web Components When:

⚛️ Use React When:

🟢 Use Vue 3 When:

🅰️ Use Angular When:

🌍 Hybrid Strategy (Best of All Worlds)

Mini Design System

🧱 1️⃣ Base Setup — ui-button.js

✅ Use it:

🧩 2️⃣ ui-card.js

✅ Use it:

🪟 3️⃣ ui-modal.js

✅ Use it:

⚙️ File Structure Example

💡 Integration Examples

✅ Vanilla HTML

✅ Vue 3

✅ React

🧠 Why This Is Powerful

Conclusion

Explore Related Topics

Category

Related Tags

Stay Updated with Our Latest Articles

About the Author

pankaj kumar

Related Articles

Run Claude Locally with Ollama: Complete Setup Guide (2026)

Claude Code CLI: The Ultimate Guide for Developers (2026)

AI Agents Are Changing Software Development