html文档根元素只能是，浏览器强制将其作为document.documentelement，:root即其别名，影响css变量、字体继承和滚动行为，不可替换或绕过。
HTML文档根元素只能是
浏览器解析HTML时，会自动把第一个 标签作为文档根元素（document.documentElement），这是规范强制要求的。你写 <div> 或 <code> 开头，浏览器也会在背后补全 结构，最终 document.documentElement 指向的仍是 —— 无法绕过，也不该绕过。
常见错误现象：
- 用 document.querySelector('body') 当作根去操作样式或事件委托，结果某些全局行为（比如 :root CSS 变量、document.scrollingElement）不生效；
- 在 Shadow DOM 或 iframe 中误以为可以自定义根，实际仍受主文档 约束。
document.documentElement 和 document.body 的区别必须分清
两者不是可互换的“顶层容器”：document.documentElement 是真实根节点，代表整个 HTML 文档结构起点；document.body 只是它的子元素，负责内容渲染区域。
-
document.documentElement才能响应:root伪类、承载lang属性、影响字体继承链起点 -
document.body设置margin会影响页面整体留白，但设置font-size不会成为根字号（rem仍基于document.documentElement的font-size） - 滚动操作中，
document.scrollingElement在标准模式下等于document.documentElement，不是body（IE 除外，但已淘汰）
CSS 中的 :root 就是 document.documentElement 的别名
写 :root { --color: blue; } 和写 html { --color: blue; } 效果一致，但前者更明确表达“根作用域”，且优先级略高（因为 :root 的 specificity 是 1，html 是 1，但 :root 在规范中被定义为唯一匹配根元素的选择器）。
容易踩的坑：
- 在 Web Component 中给 <template></template> 内写 :root，它不会生效——Shadow Root 没有 :root，得用 :host 或显式选中 shadow root 的第一个 （但通常不存在）；
- 动态改 document.documentElement.style.setProperty('--x', 'y') 才能真正更新全局变量，改 body 上的无效。
服务端渲染或模板引擎里别试图“替换根”
有些模板（如 EJS、Nunjucks）允许写 <app-root></app-root>，这种写法看似灵活，实则危险：
立即学习“前端免费学习笔记（深入）”；
- 浏览器会忽略非
的开头标签，直接从第一个开始构建 DOM 树 - SEO 工具、Lighthouse、甚至部分 SSR 框架（如 Next.js）依赖标准
结构提取元信息，缺失会导致<title></title>、<meta>丢失 - 如果你真需要封装入口（比如微前端），应该用
包裹<micro-app></micro-app>，而不是替代它
复杂点在于：根元素不可见但处处受限——它不接受 class、不支持自定义属性绑定（除了 lang、dir 等少数），连 data- 属性都要谨慎加，因为某些 polyfill 或分析工具会依赖干净的 结构。
