直接用<template>标签无法实现动态切换，真正起作用的是JavaScript控制显隐状态或Vue的<component :is="...">机制；推荐用class配合CSS控制、避免依赖style.display判断，并优先明确切换本质是DOM、组件还是视觉表现。
直接用 <template> 标签本身无法实现动态切换——它只是声明式占位，不参与运行时逻辑。真正起作用的是配合 JavaScript 控制显示/隐藏，或结合框架（如 Vue）的 <component :is="..."> 机制。
原生 HTML + JS 实现 tab 切换的核心逻辑
关键不是模板本身，而是如何用 JS 管理状态和 DOM 可见性。常见错误是依赖 element.style.display 判断是否显示，但该属性只读取内联样式，忽略 CSS 文件中定义的 display: none，导致初始状态错判。
- 用 class 控制显隐（如
active/hidden），CSS 中统一定义.hidden { display: none; } - 导航按钮加
data-target属性，指向对应内容区块的id - 切换时先移除所有
active类，再给目标按钮和内容块添加 - 默认激活项必须在 HTML 结构中预先标记（如
<div id="tab1" class="tab-pane active">），不能仅靠 JS 后补
Vue 中用 <component :is="..."> 替换模板内容
这是最接近“HTML 模板动态切换”的真实用法：把组件名存在变量里，<component :is="currentComponent"> 就会实时挂载对应组件。
-
currentComponent可以是字符串（如'DAB'）、局部注册的组件对象、或异步 import() 返回的 Promise - 必须确保组件已注册（全局或局部），否则渲染为空白且控制台报
Unknown custom element - 配合
<transition>可加入场动画，但需注意mode="out-in"避免新旧组件同时出现 - 不要在
:is绑定中直接写组件实例（如:is="new MyComponent()"），Vue 不支持运行时构造
CSS 变量 + class 切换实现主题级组件替换
当“组件切换”实质是视觉风格切换（比如白天/夜间模式下的同一结构不同配色），用 CSS 变量比替换 DOM 更轻量。
立即学习“前端免费学习笔记（深入）”；
- 在
:root定义基础变量，如--bg-color: #fff;，再在.theme-dark下覆盖：.theme-dark { --bg-color: #222; } - 切换时只改
document.documentElement.className，所有使用var(--bg-color)的元素自动响应 - 避免用
!important覆盖变量值，会导致后续扩展困难 - 变量命名要有语义层级，例如
--color-primary、--color-primary-hover，而不是--c1、--c2
真正容易被忽略的点是：所谓“HTML 模板切换”，90% 场景下其实是状态管理问题——你得先想清楚，要切换的是 DOM 结构、组件实例，还是仅视觉表现。选错路径，后面所有代码都在对抗框架设计意图。
