自定义元素的 constructor 中禁止操作属性或 DOM，所有初始化应严格遵循生命周期规范：className 等属性赋值必须推迟至 connectedCallback，否则在同步 createElement() 或已注册标签解析时将触发 NotSupportedError。

自定义元素的 `constructor` 中禁止操作属性或 dom，所有初始化应严格遵循生命周期规范：`classname` 等属性赋值必须推迟至 `connectedcallback`，否则在同步 `createelement()` 或已注册标签解析时将触发 `notsupportederror`。

在 Web Components 开发中，一个常见却极易被忽视的陷阱是：在自定义元素的 constructor 中直接设置 HTML 属性（如 this.className = "hi"、this.id = "foo" 或 this.setAttribute("data-ready", "true")）——这不仅违背规范，更会在特定场景下导致运行时异常。

根据 HTML 规范 §4.13.2 Custom element conformance 第 5 条明确要求：

The element must not gain any attributes or children.

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

这意味着：constructor 的唯一合法职责是调用 super()、创建 Shadow DOM（this.attachShadow()）、初始化私有字段（如 this._rendered = false），而绝不能触碰任何属性、子节点或 DOM 查询操作。

❗为什么 this.className = "hi" 在某些情况下“看似有效”，却实为危险？

关键在于元素实例化方式与注册时机的组合：

场景	是否报错	原因说明
✅ 标签出现在 customElements.define() 之前（脚本在