如何利用HTML自定义元素实现符合语义的UI原子组件-html教程-PHP中文网

html自定义元素无原生语义，仅加role或tabindex无法复现原生行为（如键盘激活、表单集成、伪类响应）；真正语义化需继承htmlelement、设formassociated=true、实现form回调及状态桥接，并通过internals api暴露真实控件。

如何利用html自定义元素实现符合语义的ui原子组件

HTML自定义元素本身不赋予语义，my-button 和 x-toggle 在无障碍、SEO、浏览器解析层面和 div 一样——除非你主动对齐原生语义。

为什么 `role` 和 `tabindex` 不够用

仅加 role="button" 或 aria-checked 只能骗过部分辅助技术，但无法触发原生行为：比如空格键激活、Enter 提交、disabled 属性的表单提交拦截、:disabled 伪类样式自动生效。浏览器不会因为加了 role 就把你的 x-toggle 当成真正的 <input type="checkbox"> 来对待。

原生 <button></button> 点击时自动获得焦点、支持键盘激活、默认可被表单收集 —— 自定义元素要复现这些，得手动监听 keydown、管理 focus()、重写 formAssociated 逻辑
role="switch" 要配合 aria-checked + aria-labelledby 才算基本达标，但依然不参与表单序列化（form.elements 里找不到它）
搜索引擎和屏幕阅读器更信任显式语义（如 <button></button>）而非隐式标记（如 <x-button role="button"></x-button>），尤其在无 JS 环境下直接失效

真正语义化的两个硬门槛：继承 + `formAssociated`

想让 x-input 在表单中被识别、校验、提交，必须走“可表单关联元素”路线，而不是套个 Shadow DOM 就完事。

类必须继承 HTMLElement，且在构造函数中调用 super()；否则 formAssociated 机制根本启动不了
必须显式设置 static formAssociated = true，这是启用表单集成的开关
必须实现 formDisabledCallback 和 formResetCallback，否则 form.reset() 和 fieldset[disabled] 下的行为完全失控
必须在 constructor 中创建一个真实 input（或 button 等）并挂到 Shadow DOM 里，再把它的 value、checked、validity 等状态桥接到自定义元素的属性上

示例关键片段：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

class XInput extends HTMLElement {
  static formAssociated = true;
  constructor() {
    super();
    this._internals = this.attachShadow({ mode: 'open' });
    const input = document.createElement('input');
    input.type = 'text';
    this._internals.append(input);
    this._input = input;
  }
  get value() { return this._input.value; }
  set value(v) { this._input.value = v; }
  // ……还要实现 reportValidity(), checkValidity(), setCustomValidity()
}

`attributeChangedCallback` 同步属性 ≠ 同步语义

很多人以为只要监听 disabled 并设 this._input.disabled = newValue !== null 就万事大吉，其实漏掉了三件事：

初始 HTML 中写 <x-input disabled></x-input> 会触发回调，但 newValue 是 null，不是 "true"，直接用 === 'true' 判断会失败
el.disabled = true 这种 JS 属性赋值，根本不会触发 attributeChangedCallback，必须同时代理 disabled 的 getter/setter
设 this._input.disabled = true 只禁用了内部控件，但没通知浏览器这个元素已退出表单交互流 —— 必须靠 formDisabledCallback 配合 this._internals.setFormValue() 或 this._internals.setValidity() 才行

Shadow DOM 里怎么暴露语义节点

Shadow DOM 默认隔离，但语义节点（如 input、button）必须能被浏览器“看见”。不能只藏在里面就完事。

必须用 this._internals = this.attachShadow({ mode: 'open' })，不能用 'closed'，否则 _internals API 不可用
必须把真实控件放进 Shadow DOM，并通过 this._internals.setFormValue() 主动上报值，否则 form.submit() 时拿不到数据
若需透传 label 关联，得用 <slot name="label"></slot> + for 属性反射，或监听 label 元素的 control 属性变化
别用 display: none 隐藏内部控件 —— 屏幕阅读器会跳过它；改用 position: absolute; left: -9999px 或 clip-path 才安全