最轻量可扩展的原生路径是<template>+显式数据绑定+语义化slot，但需放弃自动响应式；<template>仅为DOM容器，需手动克隆填充；slot需配合自定义元素实现；属性变更须用attributeChangedCallback监听并做浅比较。
直接结论：用 <template> + 显式数据绑定 + 语义化 slot 是最轻量、可扩展性最强的原生路径，但必须放弃“自动响应式”幻想。
为什么不能只靠 <template> 自动渲染
很多人误以为把 HTML 写进 <template> 就算完成了组件封装——其实只是存了个“空壳”。<template> 内容默认不渲染、不执行脚本、不解析绑定语法（比如 {{value}}），它纯粹是 DOM 片段容器。你得手动克隆、查找占位节点、填值、插入，否则它永远躺在内存里不动。
- 常见错误：把模板当 Mustache 或 Vue 模板用，直接写
{{title}}却没配任何解析逻辑 → 页面空白或显示原始字符串 - 适用场景：结构稳定、数据简单、不需要频繁重渲染的列表项、弹窗、卡片等
- 性能影响：每次调用
cloneNode(true)都是深拷贝，大量重复克隆会卡顿；建议缓存克隆后的文档片段（DocumentFragment）复用
如何让 <template> 支持 slot 扩展点
原生 <template> 本身不支持 <slot>，但你可以把它和自定义元素配合使用，在 connectedCallback() 里把 this.innerHTML 或 this.children 投入 shadowRoot 的 <slot> 中——这才是真正可插拔的扩展方式。
- 关键点：模板负责“骨架”，自定义元素负责“调度”，
<slot>负责“留口”。例如<my-card><h3 slot="title">自定义标题</h3></my-card> - 容易踩的坑：在
shadowRoot里用innerHTML注入内容时，内联事件（如onclick）会被剥离，必须用addEventListener绑定 - 兼容性注意：IE 不支持
<slot>，若需支持 IE11，改用data-slot属性 + 手动移动节点
扩展性真正的瓶颈不在模板，而在属性响应逻辑
你写了 <my-input value="abc">，但用户后续改了 el.value = 'xyz'，组件内部不会自动同步——因为原生 <template> 没有响应式系统。要支持这种更新，必须显式监听属性变更。
立即学习“前端免费学习笔记（深入）”；
- 必须实现
attributeChangedCallback，且只监听你声明的observedAttributes（如['value', 'disabled']） - 布尔属性判断要用
this.hasAttribute('disabled')，而非this.disabled === true（未设置时值为undefined） - 避免在回调里直接操作
shadowRoot：先用Promise.resolve().then(() => { /* 更新 */ })延迟执行，防止批量触发导致重复渲染 - 字符串类属性务必做浅比较：
if (oldValue === newValue) return，否则输入框连续打字会反复重绘
真正难的不是写模板，而是决定哪些状态该暴露为属性、哪些该收为内部逻辑、哪些必须交给 slot 让使用者接管——边界划错，扩展性就变成枷锁。
