html本身不支持组件化与响应式渲染，仅是离线dom容器，无数据绑定、生命周期或自动更新能力；媒体查询仅为样式开关，真组件需js接管状态、渲染与交互。
纯 HTML 模板无法实现真正的组件化响应式渲染；所谓“组件”和“响应式”必须由 JavaScript 运行时接管，HTML 本身只提供结构容器和语义标签。
为什么 <template></template> 不是组件，只是克隆用的 DOM 片段
很多人看到 <template></template> 就以为能当组件用，结果发现改数据不更新、样式不隔离、事件不自动绑定。这是因为：<template></template> 只是浏览器不渲染的“离线 DOM 容器”，它不会触发任何生命周期、不建立响应式依赖、也不参与渲染队列。
常见错误现象：
- 把字符串直接塞进
<template></template>的innerHTML→ 丢失“未激活”特性，变成普通解析，可能提前执行 script 或触发资源加载 - 克隆后手动填值但没清理旧节点 → 多次渲染导致重复 DOM、内存泄漏
- 在
<table> 内部写 <code><template></template>→ 浏览器解析顺序异常，<template></template>被忽略或移出表格上下文正确做法是：把
<template></template>放在顶部或<script></script>前，用content.cloneNode(true)克隆，再逐个赋值（row.querySelector('.name').textContent = item.name），最后appendChild到目标容器。media query是响应式布局的开关，不是组件逻辑的载体媒体查询只负责“在什么尺寸下启用哪套 CSS 规则”，它不感知数据、不触发重绘、不管理状态。你不能靠
@media (max-width: 768px)让一个按钮自动切换成折叠菜单 —— 那需要 JS 控制类名或属性，CSS 只做视觉映射。容易踩的坑：
- 漏写
<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></mybutton>、Vue 的<mybutton></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或使用matchMediaAPI，再驱动组件内部状态变更，最终触发重新渲染。纯 HTML/CSS 方案只能做到静态断点切换，一旦涉及数据驱动、条件渲染、异步加载、状态同步，就必须引入 JS 执行层。别被“HTML5 模板”“响应式 CSS”这类词误导 —— 它们只是拼图的一角，缺了 JS 运行时，整幅画就悬在半空。
- 漏写
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
