自定义Web Component的setter和getter无法调用问题求助

问题原因 #

1. 脚本执行顺序不匹配：index.html中的内联脚本在自定义元素完成注册前就已执行，此时页面上的<counter-wc-custom>是HTMLUnknownElement（浏览器对未定义自定义元素的默认处理）。此时直接设置count会给元素添加一个自有属性，而非触发自定义元素类中定义的setter。
2. 元素升级后的属性优先级：当后续自定义元素完成注册，浏览器会将HTMLUnknownElement升级为CounterWebComponent实例，但由于元素上已存在同名的自有属性count，后续访问时会优先读取自有属性，完全跳过原型链上的getter/setter。
3. document.createElement的特殊性：通过该方法创建元素时，自定义元素已完成注册，直接生成的是CounterWebComponent实例，因此能正常触发类中的getter/setter。

解决方案 #

方案1：调整脚本加载顺序 #

确保自定义元素的编译脚本在index.html的内联脚本之前引入，保证自定义元素先完成注册，再执行操作逻辑：

<!-- 先引入自定义组件的编译脚本 -->
<script src="/path/to/counter-web-component.js"></script>

<counter-wc-custom id="counter1"></counter-wc-custom>

<script>
  const counter2 = document.getElementById("counter1");
  counter2.count = 23;
  alert(counter2.count);
</script>

方案2：等待自定义元素注册完成 #

使用customElements.whenDefined方法，监听目标自定义元素的注册完成事件，再执行DOM操作：

<counter-wc-custom id="counter1"></counter-wc-custom>

<script>
  // 等待自定义元素注册完成
  customElements.whenDefined('counter-wc-custom').then(() => {
    const counter2 = document.getElementById("counter1");
    counter2.count = 23;
    alert(counter2.count);
    console.log("_count", counter2._count);
  });
</script>

方案3：React环境下的正确操作方式 #

在Create React App或React模板中，避免直接在index.html内联脚本中操作DOM，改用React的生命周期钩子（如useEffect）确保在组件挂载后执行操作，同时通过ref获取正确的自定义元素实例：

import { useEffect, useRef } from 'react';

// 自定义元素类型声明（TypeScript环境需要）
declare global {
  interface HTMLElementTagNameMap {
    'counter-wc-custom': CounterWebComponent;
  }
}

function App() {
  const counterRef = useRef<CounterWebComponent>(null);

  useEffect(() => {
    if (counterRef.current) {
      counterRef.current.count = 23;
      console.log(counterRef.current.count);
    }
  }, []);

  return (
    <div className="App">
      <counter-wc-custom ref={counterRef}></counter-wc-custom>
    </div>
  );
}

export default App;

额外注意（TypeScript环境） #

为了让TypeScript正确识别自定义元素的属性，需添加全局类型声明，避免类型报错：

declare class CounterWebComponent extends HTMLElement {
  count: number;
  _count: number;
}

declare global {
  namespace JSX {
    interface IntrinsicElements {
      'counter-wc-custom': React.DetailedHTMLProps<React.HTMLAttributes<CounterWebComponent>, CounterWebComponent>;
    }
  }
  interface HTMLElementTagNameMap {
    'counter-wc-custom': CounterWebComponent;
  }
}

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