HTMLElement: attachInternals() method
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2023.
TheHTMLElement.attachInternals() method returns anElementInternals object.This method allows acustom element to participate in HTML forms. TheElementInternals interface provides utilities for working with these elements in the same way you would work with any standard HTML form element, and also exposes theAccessibility Object Model to the element.
Syntax
attachInternals()Parameters
None.
Return value
AnElementInternals object.
Exceptions
NotSupportedErrorDOMExceptionThrown if the element is not a custom element.
NotSupportedErrorDOMExceptionThrown if the "internals" feature was disabled as part of the element definition.
NotSupportedErrorDOMExceptionThrown if this method is called twice on the same element.
Examples
The following example demonstrates how to create a custom form-associated element withHTMLElement.attachInternals. TheElementInternals.form property is then printed to the console to demonstrate that we have anElementInternals 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
| Specification |
|---|
| HTML # dom-attachinternals |