customElements.define() 是唯一安全标准的注册方式，document.registerElement() 因被废弃已在主流浏览器移除；connectedCallback/disconnectedCallback 仅反映 DOM 连接状态；SSR 需运行时检测；Shadow DOM 样式隔离存在 :host、::slotted 和 CSS 变量等穿透通道。
customElements.define() 是当前唯一安全、标准、可部署的注册方式，document.registerElement() 已被废弃且在所有现代浏览器中报错。
为什么 document.registerElement() 会报错？
这个 API 在 Chrome 67、Firefox 63、Safari 12.1 中已被完全移除。如果你看到 TypeError: document.registerElement is not a function，说明你正在用过时教程里的代码。
- 旧写法（失效）：
document.registerElement('x-tab', { prototype: Object.create(HTMLElement.prototype) }) - 新写法（必须）：
customElements.define('x-tab', class extends HTMLElement { /* ... */ }) - 类名必须是合法标识符，且标签名中必须含短横线（
-），否则抛出DOMException: The element name is not valid
connectedCallback 和 disconnectedCallback 的真实触发时机
这两个生命周期钩子不是“组件挂载/卸载”的等价替代，它们只反映元素是否在 DOM 树中——哪怕只是临时 append 到 document fragment 里，connectedCallback 也会触发。
-
connectedCallback不保证样式已计算或子节点已渲染，不要在里面直接读取offsetHeight或调用getBoundingClientRect() -
disconnectedCallback里不能访问shadowRoot（如果用了attachShadow），因为此时 shadow tree 已被销毁 - 若需等待首次渲染完成，可用
requestAnimationFrame(() => { /* 读尺寸 */ })或监听load事件（对含
如何让自定义元素支持 SSR（服务端渲染）？
原生自定义元素无法在 Node.js 环境中执行，customElements.define() 会报 ReferenceError: customElements is not defined。想在 Next.js/Nuxt/Vite SSR 场景下安全使用，必须做运行时检测。
- 在组件定义前加守卫：
if (typeof window !== 'undefined' && 'customElements' in window) { customElements.define('x-card', XCard); } - 服务端渲染时，仅输出基础 HTML 结构（如
- 避免在
constructor中访问document或window，否则 SSR 时直接崩溃
Shadow DOM 样式隔离的边界在哪？
Shadow DOM 确实能隔离样式，但隔离不等于绝对封闭——:host、::slotted 和 CSS 自定义属性（--my-color）是穿透通道。
-
:host只能选中自定义元素自身，不能选中它的子元素；若需响应外部 class（如:host([primary]) -
::slotted(*)匹配所有传入的 slot 内容，但无法穿透多层嵌套 slot；它匹配的是“投射前”的节点，不是渲染后的位置 - 全局 CSS 变量可被 shadow 内部读取，但 shadow 内部定义的变量默认不向外泄露；如需暴露，得显式设置
:host { --x-button-bg: #007bff; }
真正难的不是写一个能跑的自定义元素，而是让它在 SSR、跨框架、无障碍（a11y）、SEO 和样式继承之间不掉链子。很多团队卡在 connectedCallback 里同步请求数据 + 渲染模板，结果发现首屏白屏、LCP 崩坏、爬虫抓不到内容——这些都不是 API 问题，是时机和职责没划清。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
