<template>无法自动感知上下文，因其仅为静态结构容器，不执行JS、不响应属性、不访问父级环境；所有上下文感知均需JS显式提取并注入。
纯 HTML <template> 本身没有上下文感知能力——它只是静态结构容器，不执行逻辑、不响应属性、不读取父级环境。所谓“上下文感知”，必须靠 JavaScript 主动提取信息并注入模板，不能靠模板自己“感知”。
为什么<template>无法自动感知上下文
<template> 内容在解析时被剥离 DOM 树，不触发任何 JS 执行或 CSS 计算；它不监听属性变更，也不访问父元素、document 或 window 状态。所有“感知”动作（如读取 data-* 属性、检查祖先节点、获取当前 URL 参数）都得由你写的 JS 显式完成。
- 常见错误：把占位符写成
{{title}}就以为能自动绑定——实际只是字符串，不会被替换 - 常见误解：认为
<template>+innerHTML能像 Vue 模板一样响应式更新——它完全静态，每次更新都要手动克隆+填充+替换 - 性能陷阱：在循环中反复调用
cloneNode(true)并遍历节点找data-bind，比直接拼接字符串慢得多，尤其节点多时
如何让模板“感知”宿主元素的属性和状态
核心是把宿主元素当作数据源，在组件初始化时读取它的属性、dataset、甚至 computedStyle，再填入模板。
- 在
connectedCallback()中调用this.getAttribute('name')或this.dataset.id获取显式传参 - 用
getComputedStyle(this).color读取宿主继承的颜色，用于动态设置内部文本色 - 检查
this.parentElement.matches('.dark-mode')判断是否处于暗色主题环境 - 避免在
constructor()里读属性——此时元素尚未挂载，getAttribute可能返回null
如何让模板“感知”页面级上下文（如语言、用户权限）
这类信息通常不在宿主元素上，需从全局或外部状态读取，但要注意封装性与可测试性。
立即学习“前端免费学习笔记（深入）”；
- 不要硬编码
window.APP_CONFIG.lang——改用参数注入，比如工厂函数createCard({ lang: 'zh-CN', userRole: 'admin' }) - 若必须依赖全局状态，确保有 fallback：例如
const lang = window.navigator?.language || 'en-US' - 对权限类判断，优先用属性控制（
<my-card can-edit="true">），而非在模板里写if (userRole === 'admin') - 禁止在模板字符串中直接拼接
location.search——URL 变化时不会自动重渲染，必须监听popstate并手动更新
真正难的不是“怎么填数据”，而是“什么时候重填”——<template> 不提供响应机制，所有更新时机（属性变、窗口 resize、语言切换）都得你自己监听、判断、触发重新渲染。这点容易被忽略，直到上线后发现按钮文字没随 locale 切换而变。
