HTMLElement: attachInternals() 方法

基线 2023

新功能

自 2023 年 3 月起，此功能在最新设备和浏览器版本上可用。此功能可能无法在旧设备或浏览器上正常运行。

HTMLElement.attachInternals() 方法返回一个 ElementInternals 对象。此方法允许 自定义元素 参与 HTML 表单。ElementInternals 接口提供用于像操作任何标准 HTML 表单元素一样操作这些元素的实用程序，并且还向元素公开 无障碍对象模型。

语法

js
attachInternals()

参数

无。

返回值

一个 ElementInternals 对象。

异常

NotSupportedError DOMException

如果元素不是自定义元素，则抛出。

NotSupportedError DOMException

如果“内部”功能在元素定义中被禁用，则抛出。

NotSupportedError DOMException

如果对同一个元素调用此方法两次，则抛出。

示例

以下示例演示了如何使用 HTMLElement.attachInternals 创建一个自定义的与表单关联的元素。然后将 ElementInternals.form 属性打印到控制台，以证明我们拥有一个 ElementInternals 对象。

js
class CustomCheckbox extends HTMLElement {
  static formAssociated = true;

  constructor() {
    super();
    this.internals_ = this.attachInternals();
  }
  // …
}

window.customElements.define("custom-checkbox", CustomCheckbox);

let element = document.getElementById("custom-checkbox");
console.log(element.internals_.form);

规范

规范
HTML 标准
# dom-attachinternals

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参见