原生html中自定义标签无效，因非标准语法；iframe和document.write()存在隔离、断裂、seo等问题；唯一零构建方案是web components，需customelements.define()注册、含短横线命名、clonenode渲染、显式open模式及正确事件监听。
原生HTML里写<include></include>根本不会生效
浏览器根本不认识<include src="header.html"></include>这种标签——它不是HTML标准，也不会被解析成任何DOM节点。你刷新页面后检查Elements面板，只会看到一个空的、未定义的自定义标签，连内容都不会加载。这不是兼容性问题，是语法无效。
常见替代方案里，iframe看似能“嵌入”，但会带来样式隔离（全局CSS进不去）、JS上下文断裂（父页脚本无法操作子页DOM）、SEO不友好（搜索引擎通常不索引iframe内容）和滚动错位等问题；document.write()则在现代页面中基本不可用：它只能在页面加载过程中调用，一旦DOM构建完成再执行就会清空整个文档。
- 真正可行的零构建方案只有Web Components：用
customElements.define()注册，名称必须含短横线（如"page-header"），否则浏览器直接忽略 -
<template></template>标签必须配合JS克隆使用：tmpl.content.cloneNode(true)，否则内容永远停留在文档片段里，不会渲染 - Shadow DOM默认
mode="closed"，外部CSS无法穿透；若需复用全局样式，得显式设为mode="open"
语义化标签不是装饰，而是组件边界
<header></header>、<nav></nav>、<main></main>、<footer></footer>这些标签自带语义、默认display行为和辅助技术支持，它们天然就是可识别的结构单元。但滥用会破坏语义一致性：比如把面包屑导航塞进<nav></nav>，或给无标题的<section></section>硬套语义，反而干扰屏幕阅读器和SEO。
实际使用中要注意：
-
<nav></nav>只用于主导航（如顶部菜单），分页、页脚链接、面包屑建议用<ol></ol>或普通<ul></ul> -
<section></section>必须有明确主题，且应包含<h2></h2>及以上层级标题；否则优先用<div> <li> <code><article></article>适用于独立分发的内容（如博客正文、新闻条目），不是所有卡片都该套它 - 每个组件外层加唯一类前缀，如
cmp-banner，子元素用BEM式命名：cmp-banner__title、cmp-banner__close - 用
data-属性传递配置：<div class="cmp-banner" data-theme="dark" data-closable="true"></div>，JS读取后动态处理 - 动态内容区域留空并加注释说明用途，如
<div class="cmp-list__items"><!-- 插入列表项 --></div>，避免硬编码内容导致复制粘贴失效 -
<template></template>内部不能直接写<style></style>或<script></script>，它们需通过JS动态注入，或用adoptedStyleSheets关联 - 组件构造函数中必须先调用
super()，再attachShadow()，顺序颠倒会导致Illegal constructor错误 - 若组件需接收文本内容，用
<slot></slot>占位，而不是硬编码文字；否则<page-header>My Site</page-header>里的“My Site”永远不会显示
纯HTML项目做组件化，靠的是契约而非运行时能力
没有框架时，“组件”只是人为约定的结构+样式+行为组合体，不提供props、响应式更新或虚拟DOM。它能复用的前提是：样式不泄漏、数据可注入、结构可预测。
实操上要守住三条线：
Web Components里shadowRoot事件监听不能写错
组件内响应用户操作，必须用this.shadowRoot.addEventListener()，而不是document.addEventListener()。后者监听的是全局document，无法捕获Shadow DOM内部事件，且容易引发重复绑定或内存泄漏。
其他关键点：
Web Components的注册和使用本身不难，但Shadow DOM的封闭性、slot机制、事件作用域这些细节，稍不注意就卡住一整天。别指望它像框架那样自动同步状态——它只管渲染和封装，逻辑还得自己写清楚。
