HTML模板无内置状态订阅机制，必须依赖JavaScript实现：customElements.define()配合attributeChangedCallback可轻量订阅属性变更，而MutationObserver无法监听未挂载的<template>内容。
HTML模板里没有内置状态订阅机制
直接在 <template> 标签里写响应式逻辑是无效的——HTML 模板本身只是静态结构描述，不执行 JS、不监听变化、也不触发重渲染。所谓“全局状态订阅”，必须靠 JavaScript 层介入，HTML 模板只负责声明占位和绑定钩子。
常见误解是把 v-if、{{ state.count }} 这类 Vue 语法当成 HTML 原生能力，其实它们依赖框架编译器解析并注入响应式系统。纯 HTML + 原生 JS 场景下，得自己搭桥。
用 customElements.define() + attributeChangedCallback 订阅状态变更
这是目前最轻量、兼容性好（Chrome 67+、Firefox 63+、Safari 16.4+）、且真正“基于 HTML 模板”的方案：把状态映射为元素属性，利用自定义元素生命周期捕获变化。
- 状态更新时，统一调用
el.setAttribute('data-state', JSON.stringify(newState)) - 自定义元素在
attributeChangedCallback中解析data-state，触发局部重渲染 - 避免直接操作 innerHTML，改用
textContent或dataset提升性能 - 注意：JSON 序列化会丢失函数、undefined、Symbol 等值，仅适合 plain object / array
class StatefulCard extends HTMLElement {
static get observedAttributes() { return ['data-state']; }
attributeChangedCallback(name, oldVal, newVal) {
if (name === 'data-state') {
const state = JSON.parse(newVal || '{}');
this.querySelector('.count').textContent = state.count ?? 0;
}
}
}
customElements.define('stateful-card', StatefulCard);
为什么不用 MutationObserver 监听全局 <template>？
MutationObserver 不能监听 <template> 内部变化——它只对已挂载到 DOM 的节点生效，而 <template> 内容默认不渲染、不触发任何生命周期。试图监听其 content 是徒劳的。
立即学习“前端免费学习笔记（深入）”；
- 错误做法：
new MutationObserver(...).observe(template.content, {...})→ 不报错但永远不触发 - 可行路径：把模板实例化为真实节点（
template.content.cloneNode(true)）后再观察 - 但此时“订阅”对象已是普通 DOM 节点，和“全局状态”无直接关联，需额外维护映射关系
- 性能隐患：高频状态更新会导致大量 DOM diff 和 observer 回调堆积
服务端模板（如 EJS、Nunjucks）无法实现运行时订阅
这类模板只在服务端渲染一次，输出静态 HTML。后续状态变更完全不可见，除非配合 AJAX + 全量/增量重刷，但这已脱离“HTML 模板驱动订阅”的前提。
如果项目里混用了服务端模板和前端状态管理（比如 Redux），必须明确切分职责：
- 服务端模板负责首屏骨架和初始数据注入（如
<script>window.__INITIAL_STATE__ = {...}</script>） - 前端 JS 启动后接管所有后续状态同步，HTML 模板仅作为渲染目标容器
- 别试图让
<%- user.name %>在客户端自动更新 —— 它早已被转成纯文本
实际落地时，最易忽略的是状态序列化的边界：JSON.stringify 丢数据、Object.is() 判等失效、深层嵌套导致 attributeChangedCallback 频繁触发。真要支持复杂状态，得在 setter 层做 diff 或引入 Proxy 包装，而不是指望 HTML 模板自己“活过来”。
