JavaScript Web Components组件化开发

class MyCard extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });

    const template = document.createElement('template');
    template.innerHTML = `
      <style>
        .card {
          border: 1px solid #ddd;
          border-radius: 8px;
          padding: 16px;
          font-family: sans-serif;
          background: #f9f9f9;
        }
        h3 { margin-top: 0; }
      </style>
      <div class="card">
        <h3><slot name="title">默认标题</slot></h3>
        <p><slot>默认内容</slot></p>
      </div>
    `;

    shadow.appendChild(template.content.cloneNode(true));
  }
}

customElements.define('my-card', MyCard);

<my-card>
  <span slot="title">这是标题</span>
  <p>这是主体内容</p>
</my-card>

class MyCard extends HTMLElement {
  static get observedAttributes() {
    return ['title', 'theme'];
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'title') {
      // 更新标题插槽或内部结构
      const titleSlot = this.shadowRoot.querySelector('slot[name="title"]');
      // 实际中可能需要更复杂的处理，比如重新渲染
    }
    if (name === 'theme') {
      this.shadowRoot.querySelector('.card').style.background =
        newValue === 'dark' ? '#333' : '#f9f9f9';
      this.shadowRoot.querySelector('.card').style.color =
        newValue === 'dark' ? '#fff' : '#000';
    }
  }
}

<my-card title="新闻" theme="dark">...</my-card>

<script type="module">
  import './components/my-card.js';
</script>