Web Components 实现零依赖高性能轮播图，核心是用原生能力替代第三方库：自定义元素封装、Shadow DOM 隔离、CSS transform + will-change 加速动画、requestAnimationFrame 精准调度，全程无外部依赖。
Web Components 实现零依赖高性能轮播图，核心在于用原生浏览器能力替代第三方库：利用自定义元素封装逻辑、Shadow DOM 隔离样式、CSS transform + will-change 保障动画性能，再配合 requestAnimationFrame 精准控制切换节奏——全程不引入任何外部 JS 或 CSS 文件。
用 CustomElement 定义轮播容器
通过 class Carousel extends HTMLElement 创建自定义标签，如 <img-carousel>。在构造函数中调用 this.attachShadow({ mode: 'open' }) 创建影子 DOM，把结构、样式、行为全部封装在内部，避免全局污染。轮播项直接作为 slot 插入，无需额外配置，语义清晰且可复用。
- 支持任意子元素（
<img>、<div>、甚至视频）作为 slide - 自动读取子节点数量，动态生成指示器和按钮
- 所有事件监听（点击、键盘、触摸）都在 shadowRoot 内绑定，不干扰主页面
纯 CSS 驱动的滑动动画
不依赖 JS 动画库，用 transform: translateX() 移动 slides 容器，配合 transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1) 实现自然缓动。关键细节：
- 给 slides 容器设
will-change: transform，触发 GPU 加速 - 每个 slide 设置
flex: 0 0 100%，确保等宽且不换行 - 用
scroll-snap-type: x mandatory+scroll-snap-align: start实现原生滚动吸附（现代浏览器支持）
轻量级交互逻辑，不阻塞主线程
切换动作由 requestAnimationFrame 调度，避免 setInterval 造成的卡顿或累积延迟。每次切换只更新一个数值（当前索引），然后批量计算 translateX 值并写入 style —— 不操作 DOM 结构，不触发回流。
- 前进/后退按钮点击时，立即计算目标位置，不等待上一帧结束
- 触摸拖拽使用
touchstart → touchmove → touchend链，只在 end 时判断位移阈值（如 >50px）才触发切换 - 键盘支持
ArrowLeft/ArrowRight和Home/End，无障碍友好
响应式与可访问性内建
轮播组件默认适配移动端：触摸事件自动启用，PC 端保留鼠标悬停暂停、键盘导航。通过 aria-live="polite" 和 aria-roledescription="carousel" 提供屏幕阅读器支持；指示器用 role="tablist" + aria-selected 标记当前页；所有按钮含 aria-label 描述功能。
- 无 JS 降级方案：若 JS 失效，所有 slide 默认垂直堆叠显示，仍可滚动查看
- 断点适配靠 CSS 媒体查询控制每屏展示数（如小屏 1 个，平板 2 个）
- 自动监听父容器 resize，用 ResizeObserver 动态重算 slide 宽度
