data-comp 属性是跨团队分发 HTML 组件时唯一可靠的样式锚点，必须强制用于根元素和子元素，配合属性选择器、扩展属性、div 容器、template 包裹及零构建依赖交付。
data-comp 属性必须作为唯一样式锚点
跨团队分发 HTML 组件时，类名前缀（如 .c-button）在纯 HTML 场景下必然失效——第三方可能漏掉 CSS、覆盖同名 class，或用全局选择器穿透。唯一可靠的方式是用 data-comp 属性做样式绑定。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有组件根元素强制添加
data-comp="button"、data-comp="card"等唯一值，禁止省略或动态拼接 - CSS 规则全部基于属性选择器书写：
[data-comp="button"] { display: inline-flex; }，禁用.c-button[data-comp="button"]这类混合写法 - 变体统一用扩展属性：
data-comp-size="large"、data-comp-theme="dark"，对应写[data-comp-size="large"] - CI 流程中加检查：扫描所有 HTML 片段，确保每个
data-comp值在文档内唯一且非空
HTML 结构必须禁用语义标签作容器
直接用 <header>、<main> 作组件根节点，会导致宿主页面的全局样式（如 header { margin-top: 2rem }）意外生效，且无法隔离。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 一律改用
<div data-comp="header">、<div data-comp="card">作为根元素 - 所有子元素也需带作用域标识：
<div data-comp-part="title">，避免[data-comp="card"] h2被外部h2规则干扰 - 禁用
<style>内联样式，CSS 必须外置为独立文件，通过<link rel="stylesheet">加载 - 第三方框架（如 Bootstrap）的 CSS 必须重写为
data-comp驱动，不能直接引入原始 CSS
组件 HTML 片段必须自闭合且可独立复制
组件被复制粘贴到任意页面时，不能依赖父级环境。结构松散会放大属性选择器副作用，比如嵌套过深、标签错位、ID 重复等。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 禁止使用
id做模块标识——循环渲染时必然重复，document.getElementById()只返回第一个 - 模板片段统一用
<template>包裹，而非display: none的<div>；前者不参与渲染、不触发样式计算 - 嵌套层级不超过三层，超过即拆分为子组件并加
data-comp标识 - 所有自闭合标签（如
<img>、<input>）必须显式闭合：<img src="logo.png" />，避免浏览器自动补全破坏结构
构建与交付必须剥离对构建工具的依赖
很多团队默认用 Webpack/Vite 处理 HTML 片段，但跨团队场景下，对方很可能直接复制 HTML 到静态页，没有构建流程。一旦依赖 import 或哈希类名，就直接崩。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 禁止使用原生
import加载 HTML：import headerHtml from './header.html?raw'是构建时行为，纯 HTML 场景无效 - 运行时加载必须用
fetch('./header.html')+ 手动解析脚本：返回的 HTML 字符串中<script>不会执行，需提取后动态创建并插入 - 相对路径资源（如
<img src="logo.png">）会 404，要么写绝对路径，要么要求宿主页设置<base href="/assets/"> - 交付物只含三样：HTML 片段、CSS 文件、JS 初始化脚本（无构建依赖），其他全由使用者自行集成
