Web Components vs Framework Components

Technical Deep Dive & Specifications

The Fundamental Dichotomy: Attributes vs. Properties

One of the most frequent sources of confusion for frontend engineers is the distinction between HTML Attributes and DOM Properties:

+-------------------------------------------------------------------------------+
| HTML ATTRIBUTE (Declarative / Serialized)                                     |
|   <user-card user-id="4812" is-admin="true"></user-card>                      |
|   - Always parsed as a STRING                                                 |
|   - Visible in the HTML source code and DevTools Elements panel               |
|   - Inspected via element.getAttribute('user-id')                             |
+-------------------------------------------------------------------------------+
                                      VS
+-------------------------------------------------------------------------------+
| DOM PROPERTY (Imperative / In-Memory Object Reference)                        |
|   element.userData = { id: 4812, roles: ['admin', 'billing'] };               |
|   - Can store ANY JavaScript type: Objects, Arrays, Functions, Symbols        |
|   - Lives in JavaScript heap memory; not serialized to HTML string            |
|   - Accessed directly via element.userData                                    |
+-------------------------------------------------------------------------------+

Framework Interoperability Breakdown

+-----------------------------------------------------------------------------------------+
|                               FRAMEWORK INTEGRATION MATRIX                              |
+-------------------+--------------------------------+------------------------------------+
| Framework         | Property & Rich Data Passing   | Custom Event Handling              |
+-------------------+--------------------------------+------------------------------------+
| React (<=18)      | ⚠️ Passes everything as string  | ⚠️ Synthetic events ignore DOM     |
|                   | attributes; requires `ref`     | CustomEvents; requires manual      |
|                   | property assignment.           | `ref.addEventListener()`.          |
+-------------------+--------------------------------+------------------------------------+
| React 19+         | ✅ Native support: Sets props   | ✅ Native support: Listens directly |
|                   | if present on prototype.       | via `onCustomEventName={fn}`.      |
+-------------------+--------------------------------+------------------------------------+
| Vue 3             | ✅ Native support via `:`       | ✅ Native support via `@`           |
|                   | (e.g. `:items="dataList"`).    | (e.g. `@row-select="onSelect"`).   |
+-------------------+--------------------------------+------------------------------------+
| Angular (v14+)    | ✅ Native support via `[...]`   | ✅ Native support via `(...)`       |
|                   | (e.g. `[items]="dataList"`).   | (Requires CUSTOM_ELEMENTS_SCHEMA). |
+-------------------+--------------------------------+------------------------------------+
| Svelte / Solid    | ✅ 100% Native DOM binding     | ✅ 100% Native DOM binding         |
+-------------------+--------------------------------+------------------------------------+

1. Integrating with React 19 vs React 18

Historically (React 16 through 18), React treated custom elements as standard HTML tags, stringifying all props into attributes (items="[object Object]") and refusing to capture custom events through JSX onEvent handlers.

In React 19, React fully adopted the Custom Elements standard:

• If a prop matches a property key on the custom element prototype ('userData' in customElement), React assigns it as a DOM property.
• If no matching property exists, React sets it as an HTML attribute.
• React 19 JSX listens to native custom events directly: <ui-modal onModalClose={handleClose} />.

2. Integrating with Vue 3

Vue has provided first-class support for Web Components since inception. You only need to tell Vue's template compiler not to mistake your custom elements for missing Vue components:

// vite.config.js (Vue 3)
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          // Treat all tags starting with 'ui-' as native Custom Elements
          isCustomElement: (tag) => tag.startsWith('ui-')
        }
      }
    })
  ]
});

3. Integrating with Angular

In Angular, import CUSTOM_ELEMENTS_SCHEMA in your standalone component or NgModule:

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <ui-datagrid [rows]="users" (rowSelect)="handleRow($event)"></ui-datagrid>
  `
})
export class AppComponent {
  users = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
  handleRow(event: any) {
    console.log('Selected row:', event.detail);
  }
}

💻 Interactive Code Playground

Let's build a <data-table-grid> custom element that accepts complex nested JavaScript arrays via a DOM property setter and emits a rich row-select CustomEvent.

Starter Code

Line-by-Line Code Breakdown

• Line 49: get data() / set data(value): Exposes a standard JavaScript property getter and setter on the custom element instance.
• Line 52: this._data = value; this.render();: When an application framework sets element.data = [...], the custom element intercepts the assignment and triggers a targeted render.
• Line 64: new CustomEvent('row-select', { detail: ..., composed: true }): Dispatches the custom event payload with standard W3C DOM structure.
• Line 144: grid.data = [ ... ]: Demonstrates how React 19, Vue, or Angular binds rich nested array data without stringification.

Expected Browser Render Output

A dark-themed data table appears containing three employee records. Clicking any row immediately renders the serialized JSON event payload (with selectedRow details and timestamp) in the preview box beneath the table.