HTML属性均为字符串，类型校验需在Web Component的attributeChangedCallback中手动实现，通过Number()等转换并判断NaN，且须预先在observedAttributes中声明监听属性。
HTML 本身不提供组件属性类型校验机制——它没有类型系统，也不解析或验证自定义属性的值类型。所谓“HTML 实现”，实际是指在使用 customElements.define 定义的 Web Component 中，结合 JavaScript 主动做校验，而 HTML 部分仅负责传递原始字符串值。
为什么 HTML 属性全是字符串？
所有通过 HTML 标签写入的属性（如 <my-input value="123" required>）都会被浏览器解析为字符串，哪怕你写 count="5" 或 disabled="false"，element.getAttribute('count') 返回的仍是 "5"，getAttribute('disabled') 返回 ""（而非 false）。这是 DOM 规范决定的，无法绕过。
- 布尔属性（如
disabled、required）存在即为 true，不存在即为 false；用hasAttribute判断，别依赖getAttribute的返回值 - 数值、对象、数组等类型必须手动转换，且需容错（比如
parseInt("abc")→NaN） - 直接在
attributeChangedCallback里做校验最合理，因为它是唯一能捕获 HTML 属性变更的钩子
在 attributeChangedCallback 中做类型校验
Web Component 的生命周期方法 attributeChangedCallback 是校验入口。它只在 HTML 属性被设置、修改或移除时触发，且只对在 observedAttributes 数组中声明的属性生效。
- 必须显式声明要监听的属性：
static get observedAttributes() { return ['value', 'max', 'disabled']; } - 校验逻辑应放在该回调内，而不是
connectedCallback：后者不响应属性变更 - 对每个属性分别处理，避免把
value当数字却没检查是否为有效数字 - 建议用
Number(value)而非parseInt，前者对" 12.5 "更健壮；无效时得到NaN，可统一抛错或 fallback
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'max') {
const num = Number(newValue);
if (isNaN(num) || num < 0) {
console.warn(`<${this.localName}> invalid 'max': "${newValue}"`);
this.setAttribute('max', '100'); // 自动修正
return;
}
}
}
如何让开发者知道属性类型错了？
浏览器不会报错，所以得主动反馈。靠控制台警告 + 属性自动恢复是最实用的做法，既不中断渲染，又暴露问题。
立即学习“前端免费学习笔记（深入）”；
- 不要 throw Error：会阻塞整个 custom element 升级，导致页面白屏或 JS 崩溃
- 用
console.warn提示具体组件名、属性名、非法值，例如：console.warn(`<date-picker>: invalid 'min-date'="${newValue}", expected ISO string`) - 对关键属性（如
id、name）可允许空字符串或 null，但数值/布尔类属性应有明确 fallback（如0、false） - 如果组件支持 JS API 设置（如
el.max = "abc"），也要在 setter 里复用同一套校验逻辑，保持一致性
真正麻烦的不是写校验代码，而是记住每种属性对应的合法类型边界——比如 step 在 <input type="number"> 中支持 "any" 字符串，但你的组件可能只接受正数。这类隐含约束，光看 HTML 标签根本看不出来。
