HTMLElement: attachInternals() method

Baseline 2023
Newly available

Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

The HTMLElement.attachInternals() method returns an ElementInternals object. This method allows a custom element to participate in HTML forms. The ElementInternals interface provides utilities for working with these elements in the same way you would work with any standard HTML form element, and also exposes the Accessibility Object Model to the element.

Syntax

js
attachInternals()

Parameters

None.

Return value

An ElementInternals object.

Exceptions

NotSupportedError DOMException

Thrown if the element is not a custom element.

NotSupportedError DOMException

Thrown if the "internals" feature was disabled as part of the element definition.

NotSupportedError DOMException

Thrown if this method is called twice on the same element.

Examples

The following example demonstrates how to create a custom form-associated element with HTMLElement.attachInternals. The ElementInternals.form property is then printed to the console to demonstrate that we have an ElementInternals object.

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);

Specifications

Specification
HTML
# dom-attachinternals

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
attachInternals

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

See also