HTML本身不支持组件化与响应式渲染，<template>仅是离线DOM容器，无数据绑定、生命周期或自动更新能力；媒体查询仅为样式开关，真组件需JS接管状态、渲染与交互。
纯 HTML 模板无法实现真正的组件化响应式渲染；所谓“组件”和“响应式”必须由 JavaScript 运行时接管，HTML 本身只提供结构容器和语义标签。
为什么 <template> 不是组件，只是克隆用的 DOM 片段
很多人看到 <template> 就以为能当组件用，结果发现改数据不更新、样式不隔离、事件不自动绑定。这是因为：<template> 只是浏览器不渲染的“离线 DOM 容器”，它不会触发任何生命周期、不建立响应式依赖、也不参与渲染队列。
常见错误现象：
- 把字符串直接塞进
<template>的innerHTML→ 丢失“未激活”特性，变成普通解析，可能提前执行 script 或触发资源加载 - 克隆后手动填值但没清理旧节点 → 多次渲染导致重复 DOM、内存泄漏
- 在
<table>内部写<template>→ 浏览器解析顺序异常，<template>被忽略或移出表格上下文
正确做法是：把 <template> 放在 <body> 顶部或 <script> 前，用 content.cloneNode(true) 克隆，再逐个赋值（row.querySelector('.name').textContent = item.name），最后 appendChild 到目标容器。
立即学习“前端免费学习笔记（深入）”；
media query 是响应式布局的开关，不是组件逻辑的载体
媒体查询只负责“在什么尺寸下启用哪套 CSS 规则”，它不感知数据、不触发重绘、不管理状态。你不能靠 @media (max-width: 768px) 让一个按钮自动切换成折叠菜单 —— 那需要 JS 控制类名或属性，CSS 只做视觉映射。
容易踩的坑：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 漏写
<meta name="viewport" content="width=device-width, initial-scale=1.0">→ 移动端强制缩放，媒体查询失效 - 用
px写断点（如@media (max-width: 768px)）→ 在高 DPR 设备上错判，应优先用em或配合resolution查询 - 在同一个选择器里混用固定宽和百分比 → 流式计算被覆盖，小屏下溢出或塌陷
推荐写法：移动优先，基础样式用 % / rem / clamp()，再用 @media (min-width: 768px) 逐步增强，避免 !important 和嵌套过深。
前端框架的“组件”本质是 JS 对象 + 渲染策略 + 更新调度
React 的 <MyButton>、Vue 的 <MyButton>、甚至 Svelte 编译后的 MyButton 函数，都不是 HTML 标签 —— 它们是运行时构造的、带状态、生命周期和 diff 策略的 JavaScript 实体。HTML 标签只是它们输出的“序列化快照”。
关键差异：
- 原生 HTML 中写
<MyButton>Click</MyButton>→ 浏览器当未知标签处理，不报错但无行为 - JSX 中写
<MyButton>Click</MyButton>→ 编译为React.createElement(MyButton, {}, 'Click')，触发组件函数执行 - Vue 模板中写
<MyButton></MyButton>→ 编译为渲染函数，收集MyButton的响应式依赖，变化时触发 patch
这意味着：如果你试图用纯 HTML + CSS 实现“点击展开/收起”的响应式组件，就必须自己写 JS 绑定事件、切换类名、控制 display，并手动维护 DOM 状态 —— 这已经是在模拟框架的最小内核了。
真正容易被忽略的是“响应式”和“组件化”的耦合前提
响应式布局关注的是视口尺寸变化时的样式适配；组件化关注的是逻辑复用与状态封装。两者只有在 JS 运行时交汇才产生实际效果：比如一个卡片组件，在小屏下变为单列滚动，在大屏下变为三栏网格 —— 这需要监听 resize 或使用 matchMedia API，再驱动组件内部状态变更，最终触发重新渲染。
纯 HTML/CSS 方案只能做到静态断点切换，一旦涉及数据驱动、条件渲染、异步加载、状态同步，就必须引入 JS 执行层。别被“HTML5 模板”“响应式 CSS”这类词误导 —— 它们只是拼图的一角，缺了 JS 运行时，整幅画就悬在半空。
