本身不响应、不自动适配屏幕，因其内容不解析、不执行脚本、不处理模板语法，仅作惰性DOM片段；需结合Web Components封装、Shadow DOM内媒体查询及手动属性监听才能实现真正响应式。
直接用 <template></template> 写响应式模块不会自动生效，它只是个不渲染的 DOM 容器；真要加新模块，得靠 Web Components 封装 + CSS 媒体查询 + 手动数据绑定，三者缺一不可。
为什么 <template></template> 本身不响应、也不适配屏幕
<template></template> 标签内容默认不解析、不执行脚本、不处理 {{}} 或 v-for；你往里写 @media (max-width: 768px) 没问题，但样式不会自动随窗口缩放重算——因为没挂载、没监听、没触发重排。它不是 Vue 模板，也不是 JSX，就是个“待命的 HTML 片段”。
常见错误现象：
- 写了
<template id="card"><div class="card">{{title}}</div></template>，页面空白或显示原始字符串 - 加了
class="card"和对应媒体查询，但组件插入后样式不生效（Shadow DOM 隔离导致外部 CSS 失效） - 用
innerHTML直接塞进父容器，结果<input>失焦、事件丢失、状态清空
新增模块必须走 customElements.define() 流程
想让新模块真正可复用、可响应、可封装，绕不开原生 Web Components。核心四步不能跳：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 定义类继承
HTMLElement，constructor 中立刻调用this.attachShadow({ mode: 'open' })（延迟到connectedCallback会报错） - 模板用
<template id="my-responsive-card"></template>单独声明，克隆时固定写法：document.getElementById('my-responsive-card').content.cloneNode(true) - 注册必须带连字符：
customElements.define('my-responsive-card', MyResponsiveCard)，否则浏览器拒绝解析 - 响应式逻辑写在 Shadow DOM 内部 CSS 中，比如
.card { width: 100%; } @media (min-width: 769px) { .card { width: 300px; } }
怎么让模块真正“响应”窗口变化或属性更新
纯 CSS 媒体查询只管尺寸，不管数据；要响应 size、theme 等属性变更，必须手动搭桥：
- 静态声明需监听的属性：
static get observedAttributes() { return ['size', 'theme']; }，漏写就收不到变更 -
attributeChangedCallback里别直接改this.style，优先操作 class：this.shadowRoot.querySelector('.card').className = `card card--${newVal}` - 监听窗口缩放？在
connectedCallback里加window.addEventListener('resize', this._onResize)，并用debounce防抖，避免高频重绘 - 布尔属性如
disabled判断要用this.hasAttribute('disabled')，不是this.disabled === true（未设置时是undefined）
别踩这些坑：路径、编码、缓存全得对上号
本地双击打开 HTML 文件（file:// 协议）时，Chrome/Edge 会拦截 <link rel="stylesheet"> 加载，导致响应式样式完全不生效。必须起本地服务：
- 终端运行：
python3 -m http.server 8000，然后访问http://localhost:8000 - CSS 文件路径以 HTML 为基准，
href="css/main.css"表示同目录下/css/main.css，别漏掉开头的/或. - 确保服务器返回
Content-Type: text/css，否则 DevTools Network 标签页里状态码是 200，但样式仍不加载 - 改完 CSS 强制刷新（
Ctrl+Shift+R），或 DevTools Network 面板勾选Disable cache，否则旧样式一直挂着
真正难的不是写模板，而是决定哪些状态该暴露为属性、哪些逻辑该放进 connectedCallback、哪些样式必须塞进 Shadow DOM 内部——边界一旦模糊，响应式就变成玄学。
