html模板不支持样式复用，内不生效因其惰性解析；需外置css或shadow dom实现样式隔离与复用。
HTML模板本身不提供样式复用机制，所有样式复用必须靠外部手段介入——要么靠CSS class 的语义化设计与继承，要么靠 Shadow DOM 的封装隔离，要么靠构建时注入统一 CSS。想靠 <template></template> 标签自动带样式？不行。
为什么 <template></template> 里写 <style></style> 不生效
<template></template> 是惰性容器，其内部的 <style></style> 标签在克隆前不会解析、不参与样式计算，也不会注入文档样式表。即使你把它 clone 进 DOM，<style></style> 也只在首次插入时生效，且没有作用域控制。
- 常见错误：把整套组件 HTML + 内联
<style></style>塞进<template id="card"></template>，然后cloneNode(true)插入，结果样式漏加载或全局污染 - 正确做法：把样式抽成独立
<link rel="stylesheet">或提前注入<style></style>到，确保所有实例共享同一份规则 - 若需局部样式，必须配合 JavaScript 手动创建
style元素并 append 到 shadowRoot（见下一条）
customElements.define() 中 Shadow DOM 的样式隔离逻辑
只有启用 Shadow DOM，才能真正实现“组件级样式复用”——不是复用代码，而是复用样式作用域。
-
this.attachShadow({ mode: 'open' })后，所有shadowRoot.innerHTML = '<style>...</style> <div>...</div>'中的样式仅作用于该影子树，不影响外部，也不被外部 CSS 覆盖 - 想让外部类名穿透进来？不行；但可以用
:host控制自定义标签自身、::slotted(<p>)</p>控制插槽内容、:host-context(.dark)响应外部上下文 - 别在
connectedCallback里重复 append 同一份<style></style>，否则每次实例化都会多加一次样式规则——应该在constructor或静态块中只注入一次
构建时 posthtml-include 与 CSS 复用的隐含依赖
这类工具只做 HTML 字符串拼接，完全不管样式。它生成的最终 HTML 文件里，所有片段共用同一份 CSS，所以复用效果取决于你如何组织 class 和 CSS 变量。
-
<include src="header.html"></include>插入后，header.html里的<div class="nav-item"> 必须和主项目 CSS 中的 <code>.nav-item定义完全一致，否则就是“结构复用了，样式没跟上” - 推荐搭配 CSS 自定义属性：
:root { --nav-bg: #2c3e50; --nav-height: 64px; }，所有复用片段通过background: var(--nav-bg)统一响应，改一处全更新 - 避免在不同片段里写重复的
<style></style>块，构建后会堆出多份冗余样式，且优先级易冲突
真正难的不是怎么把 HTML 片段塞进去，而是怎么让它们共用一套视觉契约——class 命名是否稳定、CSS 变量是否收敛、Shadow DOM 是否必要启用、构建产物是否合并了样式。这些点一旦松动，复用就退化成复制粘贴。
