Web Components 封装实战：打造可复用的跨框架组件

// 1. 定义 HTML 模板
const template = document.createElement('template');
template.innerHTML = `
  <style>
    .card {
      display: flex;
      align-items: center;
      padding: 16px;
      border: 1px solid #eee;
      border-radius: 8px;
    }
    img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      margin-right: 16px;
    }
    h3 { margin: 0; font-size: 18px; }
  </style>
  <div class="card">
    <img />
    <div>
      <h3></h3>
      <slot name="desc"></slot> <!-- 插槽支持 -->
    </div>
  </div>
`;

// 2. 创建自定义类
class UserCard extends HTMLElement {
  constructor() {
    super();
    // 开启 Shadow DOM，实现样式隔离
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.appendChild(template.content.cloneNode(true));
  }

  // 3. 监听属性变化
  static get observedAttributes() {
    return ['avatar', 'name'];
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'avatar') {
      this.shadowRoot.querySelector('img').src = newValue;
    } else if (name === 'name') {
      this.shadowRoot.querySelector('h3').innerText = newValue;
    }
  }
}

// 4. 注册组件
window.customElements.define('user-card', UserCard);

<user-card avatar="https://api.uomg.com/api/rand.avatar" name="Fruge">
  <p slot="desc">Senior Frontend Developer</p>
</user-card>

import { LitElement, html, css } from 'lit';
import { customElement, property } from 'lit/decorators.js';

@customElement('simple-counter')
export class SimpleCounter extends LitElement {
  static styles = css`
    button { color: blue; }
  `;

  @property({ type: Number })
  count = 0;

  render() {
    return html`
      <p>Count: ${this.count}</p>
      <button @click="${this._increment}">+</button>
    `;
  }

  private _increment() {
    this.count++;
    // 触发自定义事件
    this.dispatchEvent(new CustomEvent('count-changed', {
      detail: this.count,
      bubbles: true,
      composed: true // 允许穿透 Shadow DOM
    }));
  }
}

<simple-counter :count="count" @count-changed="handleCount" />