挂载点必须在 domcontentloaded 后存在且为 body 直接子元素（如 dialog），需静态声明、避免 innerhtml，用 createelement + appendchild 安全插入。
挂载点必须在 DOMContentLoaded 后存在才能安全操作
动态生成 DOM 前，得先确认父容器已就位——否则 document.getElementById('app') 返回 null，后续 appendChild() 直接抛 Cannot read property 'appendChild' of null。这不是代码写错，而是时机错了。
常见错误：把创建逻辑直接写在 <script></script> 标签里，且没加任何等待；尤其当 script 放在 里时，body 还没解析，div#app 根本不存在。
- 最稳妥做法：包裹在
document.addEventListener('DOMContentLoaded', () => { ... })里 - 更轻量替代：把
<script></script>放在前，此时 DOM 已基本就绪（但不保证所有资源加载完成） - 避免用
window.onload——它等图片、样式表全部加载完，延迟明显，且对纯 DOM 操作过度保守
createElement + appendChild 是最可控的挂载方式
innerHTML 看似简单，但容易引入 XSS 风险、丢失已有事件监听器、触发多次重排。而 document.createElement() 配合 appendChild() 是原子级可控的插入路径，适合需要精确控制节点生命周期的场景。
关键约束有三个：父节点必须存在、参数必须是 Node 实例、不能传字符串或数组。
- 错误示例：
parent.appendChild('<div>hello</div>')→ 报TypeError - 正确文本插入：
parent.appendChild(document.createTextNode('hello')) - 批量插入多个元素？用
document.createDocumentFragment()，最后只调一次appendChild()，减少重排开销 - 注意：事件监听器必须在节点插入 DOM 后绑定，否则部分浏览器不触发冒泡路径
多应用挂载点需提前声明，不能靠 JS 动态创建容器
像 React/Vue 这类框架要求挂载点是真实存在的 DOM 节点。如果用 JS 在运行时才 document.body.appendChild(div) 创建挂载容器，框架初始化可能失败——因为 document.getElementById('header-module') 在首次渲染时查不到。
真正可行的方式是在 HTML 模板里静态声明所有挂载点，哪怕内容为空：
<div id="header-module"></div> <div id="content-area"></div> <div id="sidebar-widget"></div>
webpack 构建时可通过 html-webpack-plugin 的 appMountIds 配置自动生成这些容器，但前提是模板中已预留位置。
- 不要依赖 JS 创建挂载点后再启动框架——
ReactDOM.render(..., document.getElementById('xxx'))会立即执行，没得等 - 若真需动态增删挂载区域（如微前端子应用热插拔），应由主应用统一管理容器生命周期，子应用只负责填充内容
- Shadow DOM 内不可作为挂载点——框架无法穿透边界访问真实 DOM
dialog 挂载点必须是 body 直接子元素
<dialog></dialog> 不是普通元素，它的模态行为（backdrop、焦点捕获、Esc 关闭）强依赖浏览器原生栈机制，而该机制只认一种结构：dialog 必须是 document.body 的直接子节点。
一旦嵌套进 <div class="app"> 或任何带 <code>transform/position: relative 的父容器，就会静默失效：点击 backdrop 不关闭、Tab 键逃逸、showModal() 报错或无反应。
- 错误结构：
<div><dialog></dialog></div> - 正确写法：
<dialog id="confirm"></dialog><div class="app"></div> - 框架中渲染后需手动移动：
document.body.appendChild(dialogEl)，不能靠 CSS 或 wrapper 包裹 - 多层
dialog需自己维护栈数组，document.querySelector('dialog[open]')返回的不是最上层那个
