Form-Associated Custom Elements: 构建原生表单控件

使用ElementInternals创建可参与表单验证、提交和重置的自定义HTML元素，告别第三方库。 · 难度：入门 · +10XP

Form-Associated Custom Elements: 构建原生表单控件

大多数Web组件教程忽略了一个强大功能：通过ElementInternals让你的自定义元素与<form>无缝集成。本教程教你实现一个自定义的‘星级评分’组件，它支持表单自动收集值、HTML5验证（如required、min、max）、表单重置和setFormValue。你将学习attachInternals方法、setValidity实现自定义错误信息、以及formAssociatedCallback和formResetCallback生命周期。最后实现一个可访问的、支持键盘操作的颜色选择器，并对比传统的隐藏input+JS方案与原生集成的优劣。

// 表单关联自定义元素
class StarRating extends HTMLElement {
  constructor() {
    super();
    this._internals = this.attachInternals();
  }
  set value(val) {
    this._internals.setFormValue(val);
    this.setAttribute('value', val);
  }
  get value() { return this.getAttribute('value') || 0; }
  // 验证逻辑
  checkValidity() {
    const min = parseInt(this.getAttribute('min') || 1);
    if (this.value < min) {
      this._internals.setValidity({ rangeUnderflow: true }, '评分太低');
      return false;
    }
    return true;
  }
}