HTML中声明的Web Component自定义元素无法调用类成员方法怎么办

• 自定义元素注册时机晚于HTML解析：浏览器解析到HTML中的<data-uint>标签时，若此时还未执行customElements.define注册组件，浏览器会先将其识别为未知普通HTML元素，实例化为基础HTMLElement对象，而非你定义的DataUint类实例。
• 自有属性覆盖原型方法：如果在元素完成升级前就获取实例并赋值value属性，该属性会作为实例的自有属性存在，后续元素升级为DataUint实例后，自有属性优先级高于原型链上的value setter，因此赋值不会触发对应逻辑。
• 注册脚本加载特性影响：如果自定义元素的注册代码放在type="module"的脚本中，这类脚本默认延迟到DOM解析完成后执行，也会出现先解析到自定义标签、后注册组件的情况。

调整注册代码加载顺序 #

将自定义元素的注册代码放在HTML的<head>标签中，或放在所有自定义元素标签声明之前，确保浏览器解析到自定义标签前已经完成组件注册。
示例：

<head>
  <script>
    class DataUint extends HTMLElement {
      set value(x) { 
        // 你的自定义逻辑
      }
    }
    customElements.define("data-uint", DataUint);
  </script>
</head>
<body>
  <data-uint id='num'></data-uint>
  <script>
    const x = document.getElementById('num');
    x.value = 10; // 正常触发setter
  </script>
</body>

等待元素升级完成后再操作 #

如果无法调整注册代码的位置，可以使用customElements.whenDefinedAPI等待对应组件注册完成后，再获取元素操作：

customElements.whenDefined('data-uint').then(() => {
  const x = document.getElementById('num');
  x.value = 10;
});

清除提前创建的自有属性 #

如果已经在升级前给元素赋值过value属性，可以先删除实例上的自有属性，再赋值即可触发原型上的setter：

const x = document.getElementById('num');
delete x.value;
x.value = 10;

校验元素升级状态后操作 #

可以通过instanceof判断元素是否已经完成升级，确认后再执行操作：

const x = document.getElementById('num');
if (x instanceof DataUint) {
  x.value = 10;
} else {
  customElements.whenDefined('data-uint').then(() => {
    x.value = 10;
  });
}

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