自定义元素无法替换HTML根级标签，因浏览器规范禁止；constructor中仅能调用super()并做最小初始化，DOM操作须延至connectedCallback；Shadow DOM非完全隔离，:host-context和::part支持可控样式穿透。
自定义元素无法“硬封装”HTML文档结构的底层功能，比如 、、 或全局事件流（如 DOMContentLoaded、scroll 在 document 级别），浏览器明确禁止覆盖或接管这些原生宿主环境节点。你能封装的，是可插入其中的、语义化且行为受控的子组件——不是替代，而是增强。
为什么不能用 Custom Elements 替换
浏览器在解析 HTML 时对根级标签有严格校验：遇到非法标签名（如不含短横线）或与保留名冲突的名称（如 html、head、body、slot、template），会直接忽略该标签并降级为 <div>，甚至中断解析。调用 <code>customElements.define('html', class extends HTMLElement {}) 会立即抛出 DOMException: "The name 'html' is not a valid custom element name" ——这不是兼容性问题，而是 HTML 规范层的硬性拦截。
constructor 中必须调用 super()，但不能在这里操作 DOM 或读取 this.innerHTML
自定义元素的 constructor 是同步执行的，此时元素尚未挂载到文档中，this.isConnected 为 false，所有对 this.children、this.innerHTML、getBoundingClientRect() 的访问都不可靠，返回空或报错。常见错误包括：
- 在
constructor中尝试克隆<template></template>并 append 到this，结果什么都没渲染 - 读取
this.getAttribute('src')失败，因为属性可能还没被解析（尤其在 SSR 或 innerHTML 插入场景下） - 绑定事件监听器到
this以外的全局节点（如document.body），导致多次注册或内存泄漏
正确做法是：只做最小初始化——调用 super()、创建 ShadowRoot（如果需要）、声明私有字段（如 this._count = 0）、绑定方法（如 this._onClick = this.onClick.bind(this)）。
立即学习“前端免费学习笔记（深入）”；
connectedCallback 才是真正“启动”的时机，但它不保证属性已就绪
connectedCallback 触发时，元素已插入 DOM，可以安全操作 this.shadowRoot、查询 this.attributes、添加事件监听器。但注意：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 它不等同于“属性已全部设置完成”——若元素是通过
innerHTML = '<my-editor value="test">'</my-editor>动态插入，value属性可能在connectedCallback之后才被设置 - 首次渲染应同时检查
this.getAttribute('value')和this.value（如果已定义 getter），避免漏掉初始值 - 若需响应属性变更，必须配合
static get observedAttributes()+attributeChangedCallback；否则仅靠connectedCallback无法捕获后续更新
例如封装一个带默认值的编辑器：connectedCallback 中应写 this._render(this.getAttribute('value') || this.textContent || '')，而不是只依赖属性。
Shadow DOM 不等于“完全隔离”，:host-context 和 ::part 是可控穿透点
很多人以为用了 attachShadow({ mode: 'open' }) 就万事大吉，其实样式穿透和内容分发仍有明确规则：
-
<slot></slot>是内容分发入口，外部传入的 HTML 会原样出现在shadowRoot中对应位置，不受内部样式保护——这是设计使然，不是漏洞 -
:host-context(body.dark)允许组件根据外部上下文（如）切换主题，但过度使用会破坏封装性 -
::part(editor-toolbar)需要你在 shadow 内部显式标记<div part="editor-toolbar">，才能让外部 CSS 选中它；没声明 <code>part，外部就真的一点都动不了真正“硬”的封装，是拒绝任何外部干预——那就得用
mode: 'closed'，但代价是调试困难（this.shadowRoot为null），且无法通过 JS 访问内部节点，连自动化测试都受限。最易被忽略的一点：Custom Elements 的生命周期钩子不是原子性的。同一个元素可能被反复
connected/disconnected（比如在 Vue/React 中 v-if 切换），而attributeChangedCallback可能被高频触发（如输入框实时绑定）。防重复执行、防内存泄漏、防状态错乱，得靠开发者自己加守卫逻辑，浏览器不会替你做。
