HTMLElement.attachInternals()

The HTMLElement.attachInternals() method returns a 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

var internals = element.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.

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

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
attachInternals
77
79
93
No
64
No
77
77
93
55
No
12.0

See also

© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals