HTML本身不支持组件化编辑器，需HTML结构+CSS隔离+JS封装+工具链协同实现；静态复用靠约定，可视化编辑靠工具链，真正隔离靠Web Component。
纯 HTML 本身不提供“组件化编辑器”能力，所谓“HTML 实现的组件化页面编辑器”，本质是用 HTML 结构 + CSS 隔离 + JS 封装 + 编辑器插件协同完成的，不是写个 <div class="card"> 就能拖拽编辑。真要落地，得明确边界：静态复用靠约定，可视化编辑靠工具链，真正隔离靠 Web Component。
用 <template> + data-* 做可插入的静态组件模板
这是最轻量、兼容性最好、也最容易失控的方式。它不依赖任何框架，但需要你主动约束结构和命名。
- 每个可复用区块必须包裹在
<template id="cmp-banner">中，避免被浏览器渲染又便于 JS 克隆 - 内部用
data-属性声明配置点，比如<div class="cmp-banner" data-theme="dark" data-closable="true">，JS 初始化时读取并响应 - 禁止在模板里硬编码路径、文案或 ID；所有动态内容留空或用注释占位，例如
<h2 class="cmp-banner__title"><!-- 标题 --></h2> - 样式必须加唯一类前缀（如
cmp-banner__title），且不能依赖外部上下文——否则复制到新页面就错位
Web Component 是唯一能真正隔离的 HTML 原生方案
如果你需要“拖进去就能用、改样式不影响全局、换页面也不冲突”，customElements.define() 是目前 HTML 生态里唯一标准解。它不是“锦上添花”，而是解决样式/脚本泄漏的刚需。
-
attachShadow({ mode: 'open' })后，内部的<style>和事件监听完全不冒泡、不继承、不被外部 CSS 选中 - 属性变更必须通过
observedAttributes显式声明，比如static get observedAttributes() { return ['title', 'theme']; }，否则setAttribute()不触发更新 - 别在 Shadow DOM 里用
document.querySelector—— 要用this.shadowRoot.querySelector，否则查不到 - Chrome/Firefox/Safari 全支持，但老版 Edge（≤18）和 Android 4.4 WebView 不支持，需降级 fallback
VS Code 插件只能辅助生成 HTML，不能替代组件契约
像 “Web Layout Builder” 或 “Bootstrap VS Code Extension” 这类插件，确实能拖出 <div class="card">，但它们生成的是无契约的 HTML 垃圾——类名随意、结构不统一、没配置接口。你拖出来的卡片，跟别人拖的不是同一套东西。
立即学习“前端免费学习笔记（深入）”；
- 插件生成的代码必须手动套进你的组件规范里：补
data-属性、加前缀类名、移除内联 style - Emmet 写
.row>.col*3很快，但.cmp-grid__row>.cmp-grid__col*3才算组件化；插件不会自动帮你加前缀 - “模块化组件管理插件”（如 CodeSnap）保存的快照，若没提前约定好子元素结构（如必须含
cmp-card__header），复用时照样要重写 HTML
响应式断点和容器尺寸必须跟组件自身绑定
组件不是孤立存在的，它嵌入不同页面时，父容器宽度、字体缩放、DPR 都会变。只写 @media (max-width: 768px) 是危险的——这个断点属于整站布局，不属于某个卡片。
- 组件级响应式应优先用容器查询（
@container），但目前仅 Chrome 111+ 支持；降级方案是让组件监听自身offsetWidth变化，手动切换 class -
img在组件内必须设max-width: 100%; height: auto;，否则在窄容器里会溢出；SVG 还要加preserveAspectRatio="xMidYMid meet" - Flex/Grid 子项若设了
flex-shrink: 0，max-width会失效——这是组件内部最容易漏检的样式冲突点
真正卡住多数人的不是技术不会用，而是没想清楚：这个“组件”到底要被谁用、在哪用、改哪部分不许动。写死一个 <nav> 比抽象出 data-menu-items 简单十倍，但代价是下次改菜单时，你得 grep 全项目去修。
