html是声明式标记语言，不执行逻辑；php需服务端解析，js在客户端运行，混编导致职责不清、维护困难、无法单元测试且易引发xss等安全问题。
为什么不能在HTML里写PHP或JS逻辑
直接把数据处理、条件判断、循环拼接塞进HTML文件，等于把引擎和车身焊死——改样式得动业务，调接口得翻DOM结构，连加个class都可能触发隐藏bug。最典型的表现是：processLogin.php里混着表单HTML和数据库查询，结果设计师改完配色，登录验证突然404。
真正的问题不在“能不能运行”，而在于后续维护成本：每次修改都得同时理解三套语言（HTML结构、CSS作用域、PHP/JS执行路径），且无法做单元测试——你没法给一个<div><?php echo $user['name']; ?></div>单独写测试用例。
- 浏览器解析HTML时，
<script></script>标签内JS会立即执行，但PHP代码根本不会被解析（服务器端已渲染完毕） - 前端组件中若用
innerHTML拼接带逻辑的字符串，不仅XSS风险高，还绕过了模板引擎的变量绑定机制 - 构建工具（如Webpack）对
import路径的处理依赖模块类型，import headerHtml from './header.html?raw'才能安全加载纯模板
data-component比class更适合作为组件边界标识
用class="header"标记组件区域，本质是借CSS选择器当作用域开关，但CSS本身没有作用域概念——全局规则.header img { opacity: 0.8 }会意外影响所有同名class，而data-component="header"是专为JS设计的语义化锚点，不参与样式计算，也不会被CSS覆盖。
更重要的是唯一性保障：id="header"在同页多次渲染时必然重复，document.getElementById('header')只返回第一个节点；而data-component配合querySelectorAll('[data-component="header"]')天然支持多实例。
- 构建流程中可结合
data-version="2.1"做版本校验，防止模板与JS逻辑错配 - 服务端渲染时，
data-component属性能被OC（OpenComponents）等框架识别并自动注入数据 - 调试时直接
document.querySelector('[data-component="sidebar"]')定位，比grep class名快得多
server.js + template.html 是OpenComponents的标准分离模式
OpenComponents强制要求通过package.json中的oc.data和oc.template字段显式声明逻辑与视图的绑定关系，而不是靠文件名约定或目录结构隐式关联。
比如server.js里必须导出data函数，接收context和callback参数，所有业务逻辑（包括context.setHeader()）都封装在此；而template.html里只能用{{title}}这类占位符，禁止出现if、for等控制语法——这些由服务端预处理后注入，模板本身不执行任何逻辑。
-
server.js中调用callback(null, { title: 'Dashboard' })，数据结构必须与模板中变量名严格一致 - 模板类型由
oc.template.type指定，"handlebars"和"html"行为不同：前者支持{{#if}}，后者仅作纯字符串替换 - 缓存控制必须在
server.js中设置context.setHeader('Cache-Control', 'public max-age=3600')，模板层无权干预HTTP头
用包裹HTML片段比display:none更可靠
<div style="display:none">只是视觉隐藏，浏览器仍会解析内部样式、触发布局计算、加载<code><img src="logo.png">——如果图片路径相对当前页面而非片段所在目录，就直接404；而<template></template>是原生惰性容器，内部资源不加载、<script></script>不执行、CSS不生效，取内容时template.content.cloneNode(true)直接返回干净DOM片段。
尤其在动态插入场景下：<template></template>避免了正则匹配或document.createElement('div').innerHTML = htmlString带来的XSS风险和解析歧义（比如<table>内嵌<code><tr>会被浏览器自动修正结构）。
<ul>
<li>Webpack打包时，<code>import headerHtml from './header.html?raw'配合<template></template>能确保路径解析基于模块位置，而非HTML文档位置
<script></script>，用<template></template>包裹可天然隔离执行环境，避免意外污染全局作用域template.content是DocumentFragment，无需过滤文本节点或注释节点，比div.children更精准server.js，调接口时不用碰template.html里的占位符，删字段时不会漏掉某个class="user-name"对应的JS变量引用——这种边界感，得靠data-component、<template></template>和明确的oc.data/oc.template配置共同守住。
