同构环境下HTML模板加载需服务端输出语义化HTML、客户端在DOM就绪后注册自定义元素并同步attribute与property，避免直接操作未挂载节点；slot分发、Shadow DOM和样式隔离须按环境差异分别处理。
HTML模板在同构环境里怎么加载才不崩
服务端渲染时直接用 document.getElementById 或 querySelector 拿不到客户端才挂载的节点——这是最常见的“模板加载后 JS 报错”根源。同构环境下，HTML 模板由服务端吐出，但 DOM 初始化逻辑仍需在客户端补全，二者必须对齐生命周期。
关键不是“能不能用”，而是“什么时候用”。服务端生成的 HTML 是静态快照，template 元素本身不会被渲染，但它的 content 可以被克隆；而 customElements.define() 必须在 DOM ready 后执行，否则浏览器不认识自定义标签。
- 服务端只负责输出带语义结构的 HTML（含
<my-button></my-button>），不执行组件 JS - 客户端入口文件中统一调用
customElements.define()，且确保该脚本在<body>底部或defer加载 - 避免在
connectedCallback里直接操作document.body或全局样式表——服务端没有document.body - 如果用了
Shadow DOM，服务端无法渲染其内部结构，所以首屏内容必须靠 light DOM 承载，或用ssr工具预注入
Custom Elements + SSR 时属性和数据怎么同步
服务端吐出的 HTML 里写死 <my-input value="hello"></my-input>，客户端 JS 初始化时若没把 value 属性映射到内部 <input> 的 value，就会出现“服务端显示 hello，客户端一激活就变空”的现象。
根本原因是：属性（attribute）≠ 属性值（property）。HTML 中的 value="hello" 是 attribute，而 JS 中 element.value 是 property，二者默认不同步。
立即学习“前端免费学习笔记（深入）”；
- 在组件类的
constructor中，用this.getAttribute('value')读取初始值，并立即赋给内部 input 的valueproperty - 声明
static get observedAttributes()，监听value、disabled等关键 attribute 变更 - 在
attributeChangedCallback中，区分是服务端首次设置（此时 DOM 已存在）还是后续 JS 修改，避免重复赋值 - 不要依赖
innerHTML渲染用户传入的内容——服务端已渲染的 HTML 会被客户端 JS 覆盖，导致 XSS 风险或丢失事件绑定
同构组件里 CSS 怎么隔离又不重复加载
服务端生成的 HTML 带内联 <style>，客户端再 import './button.css'，结果样式被加载两次，且可能因顺序问题覆盖失效。
纯 CSS 文件无法跨环境复用，但 CSS-in-JS 或 shadowRoot.innerHTML = '<style>...</style>' 可以控制作用域，前提是服务端也能模拟这套逻辑。
- 避免全局 CSS 文件 import —— 改用字符串模板拼接样式，例如
const styles = `:host{display:inline-block} .label{color:var(--c-text)}` - 在
constructor中创建<style>标签并 append 到this.shadowRoot，服务端不执行这步，客户端才执行 - 如果必须用外部 CSS，通过构建工具（如 Webpack）将样式提取为字符串，在服务端模板中作为变量注入，客户端跳过加载
- 禁用
px单位——同构组件常需适配不同 DPR，用rem或em更安全
为什么 <slot> 在 SSR 下经常不生效
服务端渲染时，<my-card><h2>标题</h2><p>正文</p></my-card> 这段 HTML 会被原样输出，但服务端不知道哪些内容该进 <slot name="header">，哪些进 <slot> 默认插槽——它只是字符串，没有 DOM 树解析能力。
Slot 分发是浏览器运行时行为，服务端无法模拟，除非你手动实现 slot 映射逻辑（比如用正则提取子节点并打标记），但这极易出错。
- 简单场景：放弃命名 slot，只用默认
<slot>，服务端输出的内容会原样保留在 light DOM，客户端组件可直接读取this.childNodes - 复杂布局：改用属性传参，例如
<my-card title="标题" content="正文"></my-card>，服务端和客户端都按属性渲染 - 若必须用命名 slot，服务端需配合模板引擎（如 EJS）做预处理，把子节点转成 JSON 结构注入组件属性，客户端再还原
- 永远别在
slot里放script标签——服务端会忽略执行，客户端可能重复执行或报错
