如何通过HTML的ElementInternals的states属性通过CustomStateSet管理组件内部状态-html教程-PHP中文网

elementinternals.states 是只读的 customstateset，仅用于向 css 伪类和辅助技术暴露状态；必须通过 setvalidity() 设置，不可直接增删查改，且变更非即时生效。

如何通过html的elementinternals的states属性通过customstateset管理组件内部状态

ElementInternals.states 是一个 CustomStateSet 实例，但它**不能直接赋值或手动构造**——你只能通过 ElementInternals.setValidity() 或原生表单约束 API 间接影响它；想“管理组件内部状态”时，误以为能像 Map 一样增删查改 states，基本会踩坑。

为什么不能直接操作 `states`？

states 是只读属性，返回的 CustomStateSet 对象没有 add()、delete()、has() 等方法（目前所有浏览器实现中均为空壳对象）。它的存在仅用于向辅助技术（AT）和伪类（如 :state(loading)）暴露状态，实际状态变更必须走标准路径：

setValidity({ customError: true }, "invalid-format") → 触发 :state(invalid-format)
调用 reportValidity() 或触发原生验证流程后，对应 state 才会被 AT 识别
没有声明 formAssociated: true 的自定义元素，internals.states 始终为空且不可用

`setValidity()` 是唯一可靠入口

真正能写入 states 的只有 ElementInternals.setValidity()，且仅支持预定义的验证状态键（valueMissing、typeMismatch 等），以及通过 customError + 第二个参数注入自定义 state 名：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

class MyInput extends HTMLElement {
  constructor() {
    super();
    this.internals = this.attachInternals();
  }
  set loading(value) {
    if (value) {
      // ✅ 正确：触发 :state(loading) 伪类
      this.internals.setValidity(
        { customError: true },
        "loading"
      );
    } else {
      // ✅ 必须重置为有效，否则 state 持续存在
      this.internals.setValidity({});
    }
  }
}

注意："loading" 不是任意字符串——它需满足 CSS 标准对 :state(...) 的命名要求（仅含字母、数字、连字符，且不以数字开头）。