React使用Web Component时初始属性为空的原因及解决方法

首先明确：你观察到的现象完全符合Web Component标准规范，不是React的bug，你在原生页面没复现本质是测试用例的加载时序碰巧触发了自定义元素的「延迟升级」行为，给了你「constructor阶段可以拿到属性」的错误认知。

先理清楚自定义元素的两种初始化时序差异：

• 延迟升级场景（即原生测试用例的情况）：如果页面先解析DOM、把自定义标签连同标签上声明的所有属性都渲染成普通未知元素、插入DOM树之后，才加载JS执行customElements.define()注册自定义元素，这时候浏览器会对已经存在的元素做升级操作，触发constructor的时候，元素上早就挂载了之前解析阶段存好的所有属性，这时候读outerHTML自然能看到属性。
• 标准动态创建场景（即React渲染的情况）：如果是先注册自定义元素，再通过document.createElement()动态创建元素实例，浏览器会立刻触发constructor，这时候元素还没被设置任何属性、也没插入DOM树，在constructor里读属性、读DOM结构必然拿不到值。等后续JS逻辑逐个给元素setAttribute、最后把元素插入DOM之后，才会触发connectedCallback，这时候属性才全部挂载完成——这才是规范定义的标准行为。

React的渲染逻辑全程走动态DOM创建流程：先创建元素实例触发constructor，再逐位设置属性、绑定事件，最后挂载到DOM树触发connectedCallback，和手动写JScreateElement再setAttribute再append的行为完全一致，不存在特殊处理。
另外W3C自定义元素规范本身就明确约束：constructor执行阶段不允许访问元素属性、不允许操作子节点，这时候元素处于未完成初始化的状态，在constructor里依赖属性本身就是不符合规范的写法，之前原生用例能跑通只是时序巧合。

没有特殊黑科技，按优先级推荐以下方案：

• 优先用规范写法做逻辑迁移（零成本、全兼容）：把所有依赖属性、依赖DOM挂载状态的逻辑全部从constructor移到connectedCallback中执行；属性的变更监听统一用attributeChangedCallback配合静态属性observedAttributes实现，只要属性变化就触发对应逻辑。这种写法不管是在React、Vue、原生环境，不管元素注册时序怎么变，都不会出现状态读不到的问题，是官方推荐的标准实践。
• 如果强依赖constructor阶段拿属性，做hydrate适配：可以提前在HTML模板的根节点中写好需要用到的自定义元素标签和初始属性，等页面加载完成、元素完成升级拿到初始属性之后，再调用React的hydrateRoot启动应用，让React复用已经存在的DOM元素而不是重新创建。这种方案侵入性极强，需要严格控制时序，维护成本很高，非必要不选。
• 适配React19+实验特性：React19的实验版本提供了自定义元素专属适配层，支持在创建元素实例时就把JSX上声明的属性传入构造函数，目前该特性还未稳定，生产环境不建议使用。

你提到的「属性先移除再重新挂载」问题，是React18及更早版本对Web Component属性序列化的已知兼容问题，React18之后的版本已经修复了绝大多数常规场景的问题，只要你不在constructor阶段做DOM状态强依赖的逻辑，完全感知不到这个过程。

内容的提问来源于stack exchange，提问作者Tim