Web Components折叠面板支持open（默认展开）、accordion（手风琴模式）、disabled（禁用交互）、show-arrow（控制箭头图标）、title或slot（自定义标题与内容），并具备height动画、无障碍属性及键盘支持。
Web Components 实现可配置的折叠面板组件，核心在于用 Custom Elements 定义自定义标签，结合 Shadow DOM 封装样式与结构，再通过属性（attributes）和属性变更回调（observedAttributes）暴露配置能力。它不依赖框架，天然支持跨技术栈复用，适合构建真正“一次开发、多处嵌入”的折叠面板。
支持哪些可配置项？
一个实用的折叠面板 Web Component 至少应支持以下配置，全部通过 HTML 属性声明：
-
默认展开状态：用
open布尔属性控制初始是否展开（如<my-accordion open>） -
手风琴模式：用
accordion属性限制同一时间仅一个面板可展开 -
禁用交互：用
disabled禁用点击触发，同时视觉上置灰标题 -
箭头图标开关：用
show-arrow控制是否显示折叠指示图标 -
自定义标题文本：通过 slot 或
title属性注入标题内容
关键实现逻辑
组件内部需维护一个状态对象（如 this._isOpen），并在属性变化时同步更新 UI。重点不是简单切换 display: none，而是用 height + overflow: hidden + CSS 过渡实现平滑动画——这需要在 Shadow DOM 中动态测量内容高度：
- 首次展开前，调用
getBoundingClientRect()或offsetHeight获取内容真实高度 - 设置内联 style：
style.height = isOpen ? `${height}px` : '0' - CSS 中定义
transition: height 0.25s ease-in-out，并添加will-change: height提升渲染性能 - 关闭后，监听
transitionend事件，再设height: auto保证内容自适应（避免固定高度导致文字换行异常）
如何支持插槽与内容投影
用 <slot> 实现灵活的内容注入，是 Web Components 的优势所在：
- 标题区域使用具名 slot：
<slot name="header"></slot>，允许外部传入任意 HTML（含图标、按钮等） - 主体内容用默认 slot：
<slot></slot>，自动接收子节点作为折叠内容 - 在 Shadow DOM 中用
<slot>标签占位，样式作用域天然隔离，无需担心外部 CSS 泄漏
无障碍与键盘支持
可配置不只是视觉或行为选项，也包括可访问性支持：
- 自动为标题添加
role="button"和aria-expanded属性，并随状态实时更新 - 监听
Enter和Space键触发展开/收起，符合 WAI-ARIA 折叠面板规范 - 禁用状态下添加
aria-disabled="true"，屏幕阅读器能准确传达交互状态
