customElements.define()应在首屏组件用defer脚本同步注册、非首屏组件在交互事件中动态import后注册，避免全局提前注册导致渲染阻塞。
customElements.define() 什么时候调用才不卡首屏
全局脚本一加载就注册所有自定义元素，等于强迫浏览器提前解析、执行、升级那些根本没被用到的组件——首屏渲染直接变慢，还可能因 polyfill 未就绪或重复 define 报错。
关键不是“要不要注册”，而是“谁需要、什么时候需要”。首屏必须出现的组件（比如 <header-bar>、<nav-menu>），应放在 <script defer> 中同步注册，且脚本必须位于 </body> 前；非首屏组件（如 <settings-panel>、<detail-card>）一律延迟到交互事件中动态 import 并 define。
- 错误写法：
customElements.define('my-dialog', MyDialog)放在<head>里或模块顶层 - 正确写法：点击按钮后才执行
await import('./dialog.js'); customElements.define('my-dialog', Dialog) - 预加载可选：
import('./dialog.js').catch(() => {})放在 hover 事件里，不 await，只提前 fetch
template.content.cloneNode(true) 为什么比 innerHTML 快
用 innerHTML 拼字符串再赋值，每次都要重新解析 HTML、重建 DOM 树、丢失事件绑定、破坏焦点、触发重排，且 XSS 风险高；而 <template> 是浏览器原生缓存的已解析结构，cloneNode(true) 直接克隆 DocumentFragment，开销极低。
实测在 Chrome 128+ 下，渲染千条数据，template.content.cloneNode(true) 比字符串拼接快 2–3 倍。但注意：template.innerHTML 返回空字符串，必须用 template.content；克隆后要手动处理 ID 冲突和事件绑定。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- ID 冲突：克隆节点保留原始
id，多个实例会违反规范，需遍历重写：clone.querySelectorAll('[id]').forEach(el => el.id += '-'+Math.random().toString(36).substr(2, 9)) - 事件绑定：不能靠事件委托，尤其在 Shadow DOM 中，必须在克隆后立即为按钮等节点调用
addEventListener - 样式隔离：模板内禁用
<style>标签直插 light DOM，应走adoptedStyleSheets或shadowRoot.appendChild(style)
formAssociated: true 不加，表单提交就丢值
很多自定义输入组件看着像 <input>，点提交却收不到值——根本原因是没接入表单生命周期。浏览器只认原生控件或显式声明 formAssociated: true 的自定义元素。
三步缺一不可：构造函数中调用 this.attachInternals()；connectedCallback 中监听子 <input> 并调用 this.internals.setFormValue()；注册时传入 { formAssociated: true } 选项。漏掉任一环节，form.elements 就查不到它，submit 事件也带不走它的值。
- 禁止继承内置元素：
class MyInput extends HTMLInputElement在 Chrome 100+ 被限制，Firefox/Safari 基本不支持，现实路径只有自治型元素 - 不要在构造函数里设值：
connectedCallback才是安全时机，此时元素已挂载，能访问子节点 - 验证逻辑放
checkValidity()和reportValidity()方法里，别绕过 internals 接口直接操作 DOM
dialog 元素不显示？不是 CSS 问题，是没调用 showModal()
<dialog> 默认隐藏，且无视 display、visibility、open 属性——它只响应 JavaScript 方法。直接写 <dialog open> 或加 style="display:block"，内容虽可见，但无遮罩、无焦点锁定、Esc 键无效、点击 backdrop 不关闭，还可能残留 backdrop。
必须确保：<dialog> 是 <body> 的直接子元素；脚本执行时 DOM 已就绪（用 DOMContentLoaded 或把 script 放在 </body> 前）；打开统一用 dialogEl.showModal()，关闭统一用 dialogEl.close()。
- 点击遮罩关闭要精准判断：
dialog.addEventListener('click', e => { if (e.target === dialog) dialog.close(); })，否则点内部按钮也会关窗 -
dialog::backdrop在 Safari 不支持自定义颜色，只能用rgba(0,0,0,0.4)控制透明度；安卓旧 WebView 可能完全忽略，需 JS fallback 插入同级<div class="dialog-backdrop"> - 避免在
::backdrop里用filter或transform，移动端易卡顿
