本身不执行逻辑，只是“冷冻的 dom 片段”，必须配合customelements.define()与手动生命周期控制（如connectedcallback中克隆、绑定事件、同步状态）才能实现交互与响应式更新。
直接说结论：<template></template>本身不执行逻辑，它只是个“冷冻的 DOM 片段”，要把复杂交互逻辑封装进去，必须配合 customElements.define() + 手动生命周期控制——否则模板克隆完就静止了，点不动、输不进、状态不更新。
为什么<template></template>不能直接绑定事件或响应属性
<template></template>里的 HTML 是惰性的：没有脚本执行、不触发事件、不解析内联 onclick 或 oninput。你把它克隆进 shadowRoot 后，里面的按钮依然不会响应点击，除非你显式调用 this.shadowRoot.querySelector('button').addEventListener()。
- 常见错误：在
<template></template>里写<button onclick="doSomething()"></button>—— 这个函数在 Shadow DOM 里根本找不到作用域，报ReferenceError - 更隐蔽的问题：用
data-*属性存初始状态（如data-is-open="true"），但没在connectedCallback()里读取并同步到组件内部this._isOpen，导致 UI 和真实状态脱节 -
<template></template>不支持动态插值（比如{{title}}），所有占位符必须靠 JS 手动替换，例如遍历node.dataset.bind === 'title'然后设node.textContent
connectedCallback() 是唯一可靠的初始化入口
别在 constructor() 里操作 DOM 或发请求——此时 this.shadowRoot 虽已存在，但元素还没挂载到页面，this.getAttribute() 可能返回 null，querySelector 也常返回 null。
- ✅ 在
connectedCallback()中做三件事：克隆<template></template>内容、注入初始数据、绑定事件监听器 - ⚠️ 注意：
connectedCallback()可能被多次调用（比如组件被移出又插入 DOM），所以绑定事件前先检查是否已绑过，或用removeEventListener清理再重绑 - 如果模板含
<slot></slot>，要等slotchange事件触发后再读取分发内容，否则this.querySelectorAll('slot')可能为空
如何让模板里的状态变更真正驱动 UI 更新
HTML 模板没有响应式引擎。改了 this._loading = true，UI 不会自动变；你得主动重建 DOM 或局部更新节点。
- 最稳妥做法：每次状态变（如加载中 → 成功），都调用一个私有
_render()方法，用this.shadowRoot.innerHTML = this._getTemplateHtml()全量重绘——简单、不易漏，适合中低频更新场景 - 高频场景（如输入框实时校验）避免全量重写，改用
this.shadowRoot.querySelector('.error-message').textContent = msg局部更新，但必须确保 selector 始终有效（推荐用固定id或data-id） - 若模板含条件结构（如展开/收起面板），不要靠
style.display = 'none'切换，而应在_render()中根据this._isOpen拼接不同 HTML 字符串，保证 DOM 结构与状态严格一致
属性变更怎么同步到模板渲染结果
浏览器不会因为 my-component title="New Title" 改了就自动刷新内部文本——你得自己监听、判断、重渲染。
- 必须声明
static get observedAttributes() { return ['title', 'disabled', 'loading']; }，否则attributeChangedCallback()根本不会触发 - 在
attributeChangedCallback(attrName, oldValue, newValue)里只处理newValue !== oldValue的情况，防止重复渲染（尤其params是对象时，字符串化比较更安全） - 属性值是字符串，
disabled这类布尔属性需手动转布尔：this._disabled = newValue !== null，而不是Boolean(newValue)（因为disabled="false"仍是 true）
真正难的不是把 HTML 塞进 template，而是让每一次用户点击、每一次属性变化、每一次网络响应，都准确地翻译成 shadowRoot 里对应节点的增删改——这中间没有魔法，只有明确的生命周期钩子和一次又一次的手动同步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
