<template>是可定制UI组件的起点，因其不渲染、不执行脚本、不加载资源，仅存结构，天然隔离定义与实例化，支持复用、参数化和延迟挂载。
为什么<template>是可定制UI组件的起点
因为<template>不渲染、不执行脚本、不加载资源，只存结构——它天然隔离了“定义”和“实例化”，让组件模板真正成为可复用、可参数化、可延迟挂载的纯声明单元。你改样式、换事件绑定、插槽内容，都不影响模板本身。
常见错误是直接把<div>当模板用：<div class="modal">...</div>——这会导致DOM提前污染、样式泄漏、多次初始化冲突。而<template id="my-button">明确告诉浏览器：“先别动，等我喊你”。
- 必须用
document.importNode(template.content, true)克隆，不能appendChild(template)——后者会移动原节点，下次就没得用了 - 模板内不要写
id属性（如id="close-btn"），否则多个实例时ID重复，CSS/JS定位失效 - 支持
<slot>但别在<template>里写默认内容；默认内容应由宿主元素提供，模板只负责占位
attributeChangedCallback里该做什么、不该做什么
这个回调不是“属性一改就立刻重绘”的快捷键。它批量触发、无序执行、可能在connectedCallback之前或之后——直接在这里操作DOM，容易和初始化逻辑打架，还可能引发重复渲染。
正确做法是：只做状态标记 + 微任务延迟更新。
立即学习“前端免费学习笔记（深入）”；
- 用
if (oldValue === newValue) return过滤字符串类属性（如size、variant），避免无效刷新 - 布尔属性判断必须用
this.hasAttribute('disabled')，而不是this.disabled === true（未设置时值为undefined） - 更新DOM必须包在
Promise.resolve().then(() => { ... })里，合并多次变更，避免卡顿 - 绝对禁止在回调里调
this.setAttribute()——尤其带默认值逻辑时，会再次触发自身，死循环
对外方法为什么必须返回Promise
哪怕当前是同步逻辑，比如focus()只是调this.input.focus()，也得包装成return Promise.resolve()。否则一旦后续加了异步动作（比如加载图标字体、校验远程配置、触发动画帧），调用方代码就得全改——而Promise能无缝兼容同步/异步。
-
validate()、submit()、loadOptions()这类方法，从第一天起就该返回Promise - 错误统一用
reject(new Error('message'))，别混用console.error+ 返回false——调用方无法catch到 - 即使没异步，也写
return Promise.resolve(this.value)，不是return this.value——这是为扩展留的契约
<slot>和CSS自定义属性才是真正的扩展出口
属性和方法解决的是“我怎么控制你”，<slot>和CSS自定义属性解决的是“你怎么融入我的结构和流程”。强行把内部状态（如isHovered、isLoading）暴露为属性，只会让使用者陷入手动同步泥潭。
- 只暴露语义化属性：
value、disabled、placeholder、required——业务含义清晰，无需解释 - 视觉变体靠CSS自定义属性驱动：
--button-bg、--input-border-radius，而不是一堆theme="dark"、size="large"属性 - 结构扩展靠
<slot name="icon">、<slot name="error">，而不是errorTemplate字符串属性——后者难维护、无类型、不支持事件绑定
最易被忽略的一点：首次渲染时属性已存在，但attributeChangedCallback不会触发——所有初始化逻辑必须在connectedCallback里补一次同步，否则用户写<my-input value="hello"></my-input>，初始值就丢了。
