自定义元素实现评分星星组件需继承htmlelement，通过observedattributes监听value/max/readonly属性，在attributechangedcallback中更新状态；shadow dom封装结构与样式，支持半星、hover预览、只读模式及aria可访问性，并提供value setter/getter与change事件。
自定义元素（Custom Element）实现评分星星组件，核心是用 class 继承 HTMLElement，封装渲染、点击、hover 逻辑，并通过属性（如 value、max、readonly）控制状态，同时用 Shadow DOM 隔离样式与结构。
定义基础结构和属性绑定
创建一个继承 HTMLElement 的类，声明 observedAttributes 指定需响应的属性（如 value、max、readonly），并在 attributeChangedCallback 中同步更新内部状态。Shadow DOM 内用 SVG 或 Unicode ★/☆ 渲染星星，每颗星绑定 click 和 mousemove 事件。
- 用
attachShadow({ mode: 'closed' })封装样式与结构，避免外部干扰 - 默认
max="5"，value支持小数（如 3.7），需支持半星显示 - 通过
getAttribute('value')初始化值，转换为数字并校验范围
实现交互逻辑：点击选中 + 悬停预览
点击某颗星时，计算当前星序号（从 1 开始），结合是否启用半星，设置新 value；悬停时临时高亮，离开后恢复原值。关键点在于区分「操作态」和「展示态」——只在非只读时响应交互。
- 监听
click事件，在事件委托中获取目标星的data-index，计算 value = index - 0.5（半星）或 index（整星） mousemove时根据鼠标位置动态判断 hover 值（例如：clientX 相对于星星容器的水平比例）- 只读模式下移除所有交互事件监听器，CSS 设为
pointer-events: none
支持双向数据绑定与事件通知
组件应像原生表单控件一样，能响应外部赋值（如 el.value = 4）并派发自定义事件（如 change、input），便于集成到框架或表单中。
- 定义 getter/setter：
get value()返回当前评分，set value(v)校验并触发重绘与事件 - 用户操作后派发
new CustomEvent('change', { detail: { value } })，支持冒泡 - 提供
reset()方法，恢复初始值（可选）
样式隔离与可访问性增强
Shadow DOM 内嵌 CSS 确保样式不泄漏，同时添加 role="slider"、aria-valuenow、aria-valuemin/max 等属性，让屏幕阅读器可识别。
- 每颗星用
<button type="button"></button>包裹，确保键盘可聚焦（Tab）、空格/回车触发 - 用
tabindex="-1"控制焦点顺序，禁用原生按钮默认样式但保留语义 - 提供 CSS 自定义属性（如
--star-color、--star-size）方便主题定制
