screen reader 读不出自定义元素的 role 或 label，是因为在 dom 未挂载时（如 constructor 中）设置 aria 属性无效；必须在 connectedcallback 中设置 role、aria-label 等，并配合 tabindex 和语义化 role 才能被正确识别。
connectedCallback 是可访问性初始化的唯一可靠时机，不是 constructor；attributeChangedCallback 不处理初始属性值，首次语义设置必须手动读取；disconnectedCallback 无法保证执行，ARIA 状态清理需 fallback。
为什么 screen reader 读不出自定义元素的 role 或 label？
因为 DOM 尚未挂载时就尝试设置 ARIA 属性，或根本没设。浏览器只在元素真正插入文档后才解析 ARIA 属性，而 constructor 里 this.innerHTML、this.setAttribute('role', 'button') 都无效——此时元素还没进 DOM 树，screen reader 完全感知不到。
-
connectedCallback才是设置role、aria-label、tabindex的安全起点 - 若用 Shadow DOM，必须显式将
slot或aria-labelledby指向影子树外的元素，否则 screen reader 无法穿透 - 动态更新
aria-expanded或aria-busy必须用setAttribute()，不能只改 property（如el.ariaExpanded = 'true'）
attributeChangedCallback 为什么没同步更新 aria-*？
它只响应你声明在 observedAttributes 里的 attribute 变更，且不触发初始渲染值。比如 HTML 写了 <ds-toggle aria-checked="true"></ds-toggle>，attributeChangedCallback 不会调用——oldValue 是 null，newValue 是 "true"，但回调压根不进。
- 必须在
connectedCallback里手动调this.getAttribute('aria-checked')初始化状态 -
static get observedAttributes()必须包含'aria-checked'，不能写成'ariaChecked'或'checked' - 后续更新只能靠
this.setAttribute('aria-checked', 'false')，直接赋值this.ariaChecked = 'false'不触发回调，也不被 screen reader 感知
键盘导航失效、focus 丢失怎么办？
自定义元素默认不可聚焦，tabindex 必须在 connectedCallback 中设置，且要配合 role 显式声明交互语义。仅加 tabindex="0" 不够，screen reader 仍可能跳过。
- 按钮类组件：设
role="button"+tabindex="0"+ 监听keydown处理Enter/Space - 复选框类：设
role="checkbox"+aria-checked+ 手动同步checkedproperty 和aria-checkedattribute - 滚动容器内复用组件时，
connectedCallback可能只触发一次，焦点管理逻辑需在每次可见时重置（例如监听IntersectionObserver）
页面关闭前 ARIA 状态没清理，会污染下一个页面？
disconnectedCallback 在刷新、关闭 tab、安卓后台销毁等场景下大概率不执行，已设置的 aria-live 区域或全局 aria-hidden="true" 可能残留，导致后续页面语音播报错乱。
- 所有
aria-live区域应在connectedCallback创建，disconnectedCallback清空内容并移除，但也要配 fallback：比如用AbortController控制相关定时器或 fetch 请求 - 避免全局操作
document.body.setAttribute('aria-hidden', 'true')—— 一旦没清理，整个页面对 screen reader 不可见 - 复杂状态建议用
Map缓存每个实例的 ARIA 关联节点，在disconnectedCallback清理，同时注册beforeunload做兜底（注意：该事件在 PWA 或部分移动端不可靠）
可访问性不是加几个 ARIA 属性就完事，它是生命周期各阶段的协同结果：DOM 挂载时机决定能否被读取，attribute 变更机制决定能否被响应，销毁可靠性决定是否留下副作用。漏掉任一环节，对屏幕阅读器用户来说，就是功能完全不可见。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
