Web Components: Building Framework-Agnostic UI

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

  static get observedAttributes() {
    return ["name", "avatar", "role"];
  }

  attributeChangedCallback(name, oldVal, newVal) {
    if (oldVal !== newVal) this.render();
  }

  connectedCallback() {
    this.render();
  }

  render() {
    this.shadowRoot.innerHTML = `
      <style>
        :host { display: block; padding: 16px; border-radius: 8px; background: var(--card-bg, #fff); }
        .name { font-weight: bold; font-size: 1.1em; }
        .role { color: #666; font-size: 0.9em; }
      </style>
      <img src="${this.getAttribute("avatar")}" width="48" height="48" />
      <div class="name">${this.getAttribute("name")}</div>
      <div class="role">${this.getAttribute("role")}</div>
    `;
  }
}

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

<!-- HTML -->
<user-card name="Rahul" avatar="/avatar.jpg" role="Engineer"></user-card>

// React
function App() {
  return <user-card name="Rahul" avatar="/avatar.jpg" role="Engineer" />;
}

// Vue
<template>
  <user-card :name="user.name" :avatar="user.avatar" :role="user.role" />
</template>

/* From outside: CSS custom properties pierce Shadow DOM */
user-card {
  --card-bg: #f0f0f0;
}

/* Inside Shadow DOM: ::part() exposes elements */
// In component: <div part="title">...</div>
// From outside: user-card::part(title) { color: blue; }

// Component template
<slot name="header">Default Header</slot>
<slot>Default content</slot>

// Usage
<user-card>
  <h2 slot="header">Custom Header</h2>
  <p>This goes in the default slot</p>
</user-card>