如何用Web Components封装跨框架的业务组件？

class UserInfoCard extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }
<p>connectedCallback() {
const name = this.getAttribute('name') || '未知';
const avatar = this.getAttribute('avatar');</p><pre class='brush:php;toolbar:false;'>this.shadowRoot.innerHTML = `
  <div class="card">
    @@##@@
    <span>${name}</span>
  </div>
`;

<user-info-card name="张三" avatar="/avatar.png"></user-info-card>

this.shadowRoot.innerHTML = `
  <style>
    .card {
      display: flex;
      align-items: center;
      padding: 8px;
      border: 1px solid #ddd;
      border-radius: 4px;
    }
    img {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      margin-right: 8px;
    }
  </style>
  <div class="card">
    <img src="${avatar}" alt="头像" />
    <span>${name}</span>
  </div>
`;

static get observedAttributes() {
  return ['name', 'avatar'];
}
<p>attributeChangedCallback(name, oldValue, newValue) {
if (oldValue !== newValue) {
this.render();
}
}</p><p>render() {
const name = this.getAttribute('name') || '未知';
const avatar = this.getAttribute('avatar') || 'default.png';</p><p>this.shadowRoot.innerHTML = <code><!-- 同上 --></code>;</p><p>// 绑定事件
this.shadowRoot.querySelector('.card').onclick = () => {
this.dispatchEvent(new CustomEvent('view-profile', {
detail: { name }
}));
};
}

<user-info-card name="李四" @view-profile="handleClick" />

import { UserInfoCard } from 'my-components';
customElements.define('user-info-card', UserInfoCard);