原生HTML单选按钮组封装的核心目标是解决同名冲突、样式统一和取值安全三问题；应采用容器隔离+嵌套label方案，避免id重复与全局name污染，取值时须判空，value需遵循后端友好规范。
原生 HTML 单选按钮组本身已足够轻量、语义清晰、无障碍友好，封装成“可复用组件”的核心目标不是重写 <input type="radio">，而是解决三个实际问题：多组同名按钮不互相干扰、样式可统一控制、值获取逻辑不重复出错。直接套用框架或自定义元素反而容易过度设计。
为什么不能只靠 name 属性就万事大吉
浏览器确实仅靠 name 值做互斥分组，但真实项目中常因复制粘贴导致 name 冲突或遗漏——比如两处“性别选择”都用了 name="gender"，结果用户在页面上只能选中最后一组的选项。这不是浏览器 bug，而是 DOM 作用域未隔离所致。
- 同一页面中多个同名
name的 radio 组，只要没做作用域隔离，就会被浏览器视为“同一组”，造成跨区域互斥 -
id+for关联方式在复用时极易重复（如论坛帖内嵌多个相同结构），违反 HTML 规范且不可预测 - 不包裹
<label></label>会导致点击文字无效，移动端体验差，还影响屏幕阅读器识别
最简可行封装：嵌套 <label></label> + 容器级 name 隔离
无需 JavaScript、不引入 Custom Elements，纯 HTML/CSS 就能实现真正可复用的单选组。关键就是放弃全局 id，改用嵌套式 <label></label>，再用容器元素（如 <fieldset></fieldset> 或带 class 的 <div>）作为逻辑边界。
<ul><li>每组 radio 必须包裹在独立容器中，例如 <code><div class="radio-group" data-name="theme">
<li>每个选项写成 <code><label><input type="radio" name="theme" value="dark"> 深色模式</label>，不写 id 和 for
name="theme"，只要不在同一个父容器内，就不会互相影响——因为浏览器的互斥逻辑只发生在同名 input 的 DOM 范围内，而实际渲染时它们是分离的节点树.radio-group input[type="radio"] 统一隐藏原生控件，再用 ::before 模拟圆点，所有组自动生效安全取值：别假设一定有选中项
用户可能还没点，或者你忘了加 checked，document.querySelector('input[name="plan"]:checked') 返回的是 null，不是 undefined。直接链式访问 .value 会报错。
立即学习“前端免费学习笔记（深入）”；
- 正确写法始终加空值判断：
const selected = document.querySelector('input[name="plan"]:checked'); const planValue = selected?.value || ''; - 不要用
getElementsByName配循环，既啰嗦又容易漏掉checked判断 - 如果需要监听变化，绑定事件到容器更稳妥：
container.addEventListener('change', e => { if (e.target.type === 'radio') { ... } })，避免对每个 input 单独绑 - 表单提交时，只有被选中的那一个
input会发name=value，其余同名未选中项完全不参与提交——这点后端必须清楚，不能依赖“未提交即为 false”做业务判断
什么时候该上 Custom Elements
只有当你的单选组开始承担复杂职责时才值得升级：比如需要支持 disabled 属性透传、动态更新选项列表、内置校验规则、与父表单联动反馈状态。否则，<template></template> + JS 实例化已经绰绰有余，比写 customElements.define 少掉至少 70% 的胶水代码。
- Custom Elements 的
attributeChangedCallback要手动映射每个属性到内部 input，disabled、required、name全得自己同步 - Shadow DOM 隔离了样式，但也隔绝了全局主题变量和 CSS 自定义属性，调试成本陡增
- 如果你只是想让“深色/浅色”“公开/私有”这类固定选项在多个页面复用，
<template id="radio-theme"></template>配合document.importNode更快更透明
真正容易被忽略的，是 value 值的设计：它不是给用户看的，是给后端解析用的。别用中文、空格或特殊符号当 value，哪怕前端显示“男/女”，value 也该是 "male"/"female"——这个约定一旦定下，前后端就再难回头改。
