真正轻量的组件化起点是，它仅作“模具”不渲染、不执行脚本；需用document.importnode()克隆并安全填充内容，事件绑定必须在挂载后统一处理。
怎么用 <template></template> + cloneNode() 实现可复用模态层结构
直接写多个 <div class="modal"> 是反模式——结构重复、样式难统一、JS 逻辑散落。真正轻量的组件化起点是 <code><template></template>：它不渲染、不执行脚本、不触发资源加载，只作“模具”。但注意：<template></template> 内容不能直接修改，也不能用 innerHTML 注入占位符（会丢失事件绑定）。
实操建议：
- 把模态层骨架写进
<template id="modal-template"></template>，含遮罩层<div class="modal-overlay"> 和内容容器 <code><div class="modal-content"> <li>用 <code>document.importNode(template.content, true)克隆（比cloneNode(true)更安全，保留表单状态） - 填充内容时遍历克隆后的节点，找
data-bind="title"这类属性，再设el.textContent或el.innerHTML（后者需确保内容可信） - 不要在模板里写
onclick="close()"—— 绑定事件必须在克隆后、挂载前统一处理 - constructor 里只能调
super()和初始化 this，不能操作 DOM（元素尚未挂载） - DOM 操作必须放
connectedCallback()，否则首次渲染失败 - 想监听
open属性变化，得声明static get observedAttributes() { return ['open']; }并实现attributeChangedCallback() - Shadow DOM 默认不继承外部字体/颜色，若需继承，CSS 里写
:host { font: inherit; color: inherit; } - 遮罩层用
pointerdown（非click），规避 iOS Safari 300ms 延迟 - handler 中严格判断
e.target === e.currentTarget，禁止用overlay.contains(e.target) - 模态层容器和遮罩层必须同级、且都用
position: fixed，否则e.currentTarget可能指向错的父节点 - 移动端加
touch-action: none到遮罩层，防止手势冲突 - 遮罩层和模态层容器全部用
position: fixed，遮罩设inset: 0（等价于top:0;left:0;right:0;bottom:0） - 居中改用
display: flex; align-items: center; justify-content: center;，彻底避开 transform 依赖 - 禁用
height: 100vh，改用 JS 动态设置 CSS 变量：document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`)，然后 CSS 里用height: calc(var(--vh) * 100) - 打开模态层时加
document.body.style.overflow = 'hidden'，关闭后恢复；注意 Safari 下需额外设touch-action: manipulation防止背景滚动穿透
为什么 customElements.define() 是模态层封装的分水岭
<template></template> 解决了结构复用，但没解决状态管理、属性响应、样式隔离。真正组件化要靠 Custom Elements：它让 <app-modal></app-modal> 成为一等公民，支持 open 属性控制显隐、title 属性驱动标题更新、slot 分发任意内容。
容易踩的坑：
点击遮罩关闭时，为什么模态层内容也被关了
根本不是“遮罩没写对”，而是事件绑定逻辑错误。原生 <dialog></dialog> 的 backdrop 是伪元素，无法直接监听；手动实现时，如果给遮罩层绑 click 却不做目标校验，子元素冒泡上来就误关。
正确做法：
滚动页面后模态层偏移或遮罩漏底，怎么根治
这不是 JS 重定位的问题，是 CSS 定位机制被破坏。常见错误是用 position: absolute + top: 50%; left: 50%; transform: translate(-50%, -50%) —— 一旦祖先有 transform 或 overflow: hidden，定位就失效；100vh 在 iOS Safari 滚动时因地址栏收放会缩高，导致遮罩变短。
解决方案：
复杂点不在“怎么弹出来”，而在“怎么让它不干扰页面原有滚动、焦点、样式和可访问性”。每个模态层实例都该是独立的交互上下文，而不是一堆拼凑的 div。
