如何将现有Accordion代码改写为Web Components自定义元素？

没问题！咱们把这段普通的折叠面板代码改成Web Components自定义元素，这样你能更方便地在项目里复用它，还能让组件结构更清晰、样式更隔离。

核心思路 #

我们会把折叠面板的结构、样式和交互逻辑全部封装到一个自定义类中，通过Shadow DOM实现样式隔离，最后注册成可直接在HTML中使用的标签。

完整代码示例 #

JavaScript 代码

class CustomAccordion extends HTMLElement {
  constructor() {
    super();
    // 创建Shadow DOM，实现组件样式与外部隔离
    const shadow = this.attachShadow({ mode: 'open' });

    // 编写组件的模板（包含样式和DOM结构）
    const template = document.createElement('template');
    template.innerHTML = `
      <style>
        .accordion {
          background-color: #eee;
          color: #444;
          cursor: pointer;
          padding: 18px;
          width: 100%;
          border: none;
          text-align: left;
          outline: none;
          font-size: 15px;
          transition: background-color 0.4s ease;
        }

        .is-open, .accordion:hover {
          background-color: #ccc;
        }

        .accordion-content {
          padding: 0 18px;
          background-color: white;
          max-height: 0;
          overflow: hidden;
          transition: max-height 0.2s ease-out;
        }
      </style>
      <button class="accordion">
        <slot name="title">默认折叠面板</slot>
      </button>
      <div class="accordion-content">
        <slot name="content"></slot>
      </div>
    `;

    // 将模板内容克隆到Shadow DOM中
    shadow.appendChild(template.content.cloneNode(true));

    // 获取组件内元素，绑定点击事件
    this.accordionBtn = shadow.querySelector('.accordion');
    this.content = shadow.querySelector('.accordion-content');
    this.accordionBtn.addEventListener('click', () => this.toggleAccordion());
  }

  // 折叠/展开的核心逻辑
  toggleAccordion() {
    this.accordionBtn.classList.toggle('is-open');
    if (this.content.style.maxHeight) {
      this.content.style.maxHeight = null;
    } else {
      this.content.style.maxHeight = `${this.content.scrollHeight}px`;
    }
  }
}

// 注册自定义元素，现在就能在HTML中用<custom-accordion>标签了
customElements.define('custom-accordion', CustomAccordion);

HTML 代码

<div class="container">
  <!-- 使用自定义折叠面板组件 -->
  <custom-accordion>
    <span slot="title">Accordion #1</span>
    <p slot="content">Content 1</p>
  </custom-accordion>

  <!-- 轻松添加多个，自定义不同内容 -->
  <custom-accordion>
    <span slot="title">Accordion #2</span>
    <div slot="content">
      <p>这是第二个折叠面板的内容</p>
      <p>支持嵌套任意HTML元素哦</p>
    </div>
  </custom-accordion>
</div>

改造后的优势 #

• 样式隔离：Shadow DOM让组件内部样式不会和外部样式冲突，避免样式污染。
• 高复用性：只需编写一次组件代码，在项目任何地方用<custom-accordion>标签就能调用。
• 灵活性：通过slot插槽可以自由自定义每个面板的标题和内容，适配不同场景需求。

内容的提问来源于stack exchange，提问作者Sanjith