output标签的for属性只绑定input、select、textarea三类可交互表单控件的id，用于建立语义关联和辅助技术映射；它不触发自动更新，不支持label、div等非表单元素，大小写及符号须严格匹配，空格分隔多id，且在shadow dom中仅限当前作用域查找。
output 标签的 for 属性到底绑定什么？
for 属性不是用来“关联任意元素”的，它只认 input、select、textarea 这三类可交互表单控件的 id。浏览器靠这个 id 去查找对应控件，然后在控件值变化时自动更新 output 的文本内容。
常见错误是把 for="username" 写成 for="user-input" 却没给对应 input 设 id="user-input"——这时 output 完全不响应，控制台也**不会报错**，静默失效。
- 必须严格匹配：大小写、连字符、下划线都要一致
- 不能指向
label、div或自定义组件（哪怕它们有id） - 多个控件可共用一个
for，用空格分隔，如for="a b c"
为什么 onchange 不触发 output 更新？
因为 output 的自动更新机制依赖的是原生表单事件，但不同控件触发时机不同：input 类型为 text、number 等默认只在失去焦点（blur）或回车时才触发 input 事件；而 output 实际监听的是 input 事件，不是 change。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
-
type="range"和type="number"在拖动/滚动/输入时会频繁触发input，output实时更新 -
type="text"需要用户敲完按回车或移出焦点，才会让output变 - 想强制实时响应？加
oninput="this.form.dispatchEvent(new Event('input'))"是 hack，不推荐；更稳的方式是手动绑定input事件并调用output.value = ...
output.value 赋值后，for 属性还起作用吗？
起作用，但会被覆盖。一旦你显式设置 output.value = "xxx"，该 output 就进入“手动控制模式”：后续即使关联控件值变了，output 也不会自动刷新，除非你再把它清空（output.value = ""）或重新赋值。
- DOM 中
output.textContent和output.value是同步的；设前者等价于设后者 -
output.innerHTML不影响绑定逻辑，但会破坏语义和可访问性（屏幕阅读器可能忽略） - 若需混合动态绑定 + 手动干预，建议统一走 JS 控制：去掉
for，用addEventListener('input', () => {...})显式更新
兼容性和无障碍要注意什么？
output 标签本身支持 IE10+，但 for 的自动联动行为在 Safari 15.4 之前存在 bug：多个 for ID 用空格分隔时，只识别第一个。另外，output 默认没有 role，对屏幕阅读器不够友好。
- 必须配
aria-live="polite"才能让变化被读出，例如：<output for="age" aria-live="polite"></output> - 不要依赖
output做关键状态提示（比如密码强度），它无法保证所有辅助技术都捕获到更新 - 服务端渲染时，若初始值由 JS 注入，需确保首次渲染后立即触发一次
input事件，否则 SSR 页面首屏output可能为空
真正容易被忽略的是：当 output 位于 shadow DOM 内部时，for 查找只在当前 shadow root 范围内进行，跨 shadow boundary 的 id 绑定会失败——这种场景下，只能放弃 for，改用事件委托或手动同步。
