html模板本身不提供验证能力，它只是静态结构容器；验证必须由javascript运行时（如constraint validation api）或框架层（如react、vue的props校验）实现。
HTML模板技术本身不提供组件属性验证能力，它只是静态结构容器；所谓“属性验证器”必须由 JavaScript 运行时逻辑（如 Constraint Validation API）或框架层（如 React 的 prop-types、Vue 的 props validation）实现。
为什么 template 标签里写不了验证逻辑
<template></template> 是纯声明式片段，浏览器不会执行其中的 JS，也不会解析自定义属性为校验规则。它只在被 document.importNode() 或框架挂载时才“活过来”，此时验证责任已移交到宿主环境。
- 你不能在
<template></template>内写required并指望它对自定义组件生效——required只作用于原生<input>等表单控件 -
<template></template>中的type="email"不会触发邮箱验证，除非该节点最终被插入 DOM 且是真实<input type="email"> - 模板中写的
pattern、minlength等属性，仅当节点被克隆并挂载为原生表单控件时才参与 Constraint Validation API 流程
validity 属性只存在于原生表单控件上
你无法通过 custom-element.validity 获取验证状态，因为 ValidityState 是浏览器硬编码在 <input>、<select></select>、<textarea></textarea> 上的只读接口。自定义组件要暴露类似能力，必须手动实现：
- 监听子
<input>的input/blur事件，调用其checkValidity() - 把子控件的
validity对象透传或映射为自定义属性（如this.validity = input.validity） - 用
setCustomValidity()向子控件注入错误，再同步更新组件自身状态
想让模板“带验证语义”，得靠运行时绑定
真正起作用的是模板被实例化后，JavaScript 主动建立的验证链路。例如：
<template id="user-form"><input name="email" type="email" required><input name="age" type="number" min="18" max="120"></template>
这段模板本身无验证行为。但当你用以下方式使用它，验证才生效：
- 用
document.getElementById('user-form').content.cloneNode(true)插入 DOM → 子<input>获得原生验证能力 - 在组件
connectedCallback中遍历querySelectorAll('input')，统一监听invalid事件并调用reportValidity() - 把
form.checkValidity()封装为组件方法，供外部调用
关键点在于：模板是“图纸”，验证是“施工队”。图纸上画了门框尺寸（minlength="6"），不等于房子自动具备防盗功能；必须有人按图施工，并在验收时拿卷尺量（checkValidity()）、贴不合格标签（setCustomValidity()），才算完成验证闭环。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
