1
// 定义一个 Web Component —— 不需要任何框架
2
class UserAvatar extends HTMLElement {
3
  static get observedAttributes() {
4
    return ['name', 'avatar-url', 'size'];
5
  }
6

7
  constructor() {
8
    super();
9
    this.attachShadow({ mode: 'open' });
10
  }
11

12
  connectedCallback() {
13
    this.render();
14
  }
15

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

20
  render() {
21
    const name = this.getAttribute('name') || 'User';
22
    const size = parseInt(this.getAttribute('size') || '40');
23
    const avatarUrl = this.getAttribute('avatar-url');
24

25
    this.shadowRoot.innerHTML = `
26
      <style>
27
        :host {
28
          display: inline-flex;
29
          align-items: center;
30
          gap: 8px;
31
        }
32
        .avatar {
33
          width: ${size}px;
34
          height: ${size}px;
35
          border-radius: 50%;
36
          background: linear-gradient(135deg, #667eea, #764ba2);
37
          display: flex;
38
          align-items: center;
39
          justify-content: center;
40
          color: white;
41
          font-size: ${size * 0.4}px;
42
          font-weight: 600;
43
          overflow: hidden;
44
        }
45
        .name {
46
          font-size: 14px;
47
          color: var(--text-color, #333);
48
        }
49
      </style>
50
      <div class="avatar">
51
        ${avatarUrl ? `<img src="${avatarUrl}" style="width:100%;height:100%;object-fit:cover">` : name[0]}
52
      </div>
53
      <span class="name">${name}</span>
54
    `;
55
  }
56
}
57

58
customElements.define('user-avatar', UserAvatar);

1
<!-- React 中使用 -->
2
<UserAvatar name="张三" size="48" />
3

4
<!-- Vue 中使用 -->
5
<user-avatar name="张三" size="48"></user-avatar>
6

7
<!-- Angular 中使用 -->
8
<user-avatar [attr.name]="'张三'" [attr.size]="'48'"></user-avatar>
9

10
<!-- 原生 HTML 中使用 -->
11
<user-avatar name="张三" size="48"></user-avatar>

1
// 使用 Lit 开发 Web Components —— 体验跟 React/Vue 差不多
2
import { LitElement, html, css, property } from 'lit';
3

4
export class DataTable extends LitElement {
5
  static styles = css`
6
    :host {
7
      display: block;
8
      font-family: var(--font-family, system-ui);
9
    }
10
    table {
11
      width: 100%;
12
      border-collapse: collapse;
13
    }
14
    th {
15
      background: var(--table-header-bg, #f5f5f5);
16
      padding: 12px 16px;
17
      text-align: left;
18
      font-weight: 600;
19
      cursor: pointer;
20
      user-select: none;
21
    }
22
    th:hover {
23
      background: var(--table-header-hover-bg, #eee);
24
    }
25
    td {
26
      padding: 10px 16px;
27
      border-bottom: 1px solid var(--table-border, #e0e0e0);
28
    }
29
    .sorted-asc::after { content: ' ▲'; }
30
    .sorted-desc::after { content: ' ▼'; }
31
    .loading {
32
      text-align: center;
33
      padding: 40px;
34
      color: #999;
35
    }
36
  `;
37

38
  @property({ type: Array }) data: Record<string, any>[] = [];
39
  @property({ type: Array }) columns: ColumnDef[] = [];
40
  @property({ type: Boolean }) loading = false;
41

42
  private sortKey: string | null = null;
43
  private sortDir: 'asc' | 'desc' = 'asc';
44

45
  private handleSort(key: string) {
46
    if (this.sortKey === key) {
47
      this.sortDir = this.sortDir === 'asc' ? 'desc' : 'asc';
48
    } else {
49
      this.sortKey = key;
50
      this.sortDir = 'asc';
51
    }
52
    this.requestUpdate(); // 触发重新渲染
53
  }
54

55
  private getSortedData() {
56
    if (!this.sortKey) return this.data;
57
    return [...this.data].sort((a, b) => {
58
      const va = a[this.sortKey!];
59
      const vb = b[this.sortKey!];
60
      return this.sortDir === 'asc'
61
        ? String(va).localeCompare(String(vb))
62
        : String(vb).localeCompare(String(va));
63
    });
64
  }
65

66
  render() {
67
    if (this.loading) return html`<div class="loading">加载中...</div>`;
68

69
    const sortedData = this.getSortedData();
70

71
    return html`
72
      <table>
73
        <thead>
74
          <tr>
75
            ${this.columns.map(col => html`
76
              <th
77
                @click=${() => this.handleSort(col.key)}
78
                class=${this.sortKey === col.key
79
                  ? `sorted-${this.sortDir}`
80
                  : ''}
81
              >
82
                ${col.label}
83
              </th>
84
            `)}
85
          </tr>
86
        </thead>
87
        <tbody>
88
          ${sortedData.map(row => html`
89
            <tr>
90
              ${this.columns.map(col => html`
91
                <td>${row[col.key]}</td>
92
              `)}
93
            </tr>
94
          `)}
95
        </tbody>
96
      </table>
97
    `;
98
  }
99
}
100

101
customElements.define('data-table', DataTable);

1
<!-- 在任何页面中使用 -->
2
<sl-button variant="primary" @click=${handleClick}>
3
  提交订单
4
</sl-button>
5

6
<sl-input label="用户名" placeholder="请输入用户名" clearable>
7
</sl-input>
8

9
<sl-dialog label="确认删除" open=${showDeleteDialog}>
10
  确定要删除这条记录吗？
11
  <sl-button slot="footer" variant="danger" @click=${confirmDelete}>
12
    确认删除
13
  </sl-button>
14
  <sl-button slot="footer" @click=${cancelDelete}>
15
    取消
16
  </sl-button>
17
</sl-dialog>

1
<!-- React 项目 -->
2
<ds-button variant="primary" size="lg" @click=${handleSave}>
3
  <span slot="icon">💾</span>
4
  保存更改
5
</ds-button>
6

7
<!-- Vue 项目 -->
8
<ds-button variant="danger" :disabled="isDeleting">
9
  <span slot="icon">🗑️</span>
10
  删除项目
11
</ds-button>
12

13
<!-- 纯 HTML 页面 -->
14
<ds-button variant="secondary" size="sm">
15
  取消
16
</ds-button>
17

18
<!-- Angular 项目 -->
19
<ds-button variant="ghost" (click)="onCancel()">
20
  返回首页
21
</ds-button>