RTCIceTransport: gatheringstatechange event - Web APIs

RTCIceTransport: gatheringstatechange event
===========================================

A **`gatheringstatechange`** event is sent to an `RTCIceTransport` when its ICE candidate gathering state changes.

The gathering state, whose actual status can be found in the transport object's `gatheringState` property, indicates whether or not the ICE agent has begun gathering candidates, and if so, if it has finished doing so.

The key difference between `gatheringstatechange` and `icegatheringstatechange` is that the latter represents the overall state of the connection including every `RTCIceTransport` used by every `RTCRtpSender` and every `RTCRtpReceiver` on the entire connection. In contrast, `gatheringstatechange` represents changes to the candidate gathering state for a single transport.

This event is not cancelable and does not bubble.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.

```js
addEventListener("gatheringstatechange", (event) => {});

ongatheringstatechange = (event) => {};
```

Event type
----------

A generic `Event`.

Examples
--------

This example creates a handler for `gatheringstatechange` events on each `RTCRtpSender` associated with a given `RTCPeerConnection`. Here, the `addEventListener()` method is called to add a listener for `gatheringstatechange` events:

```js
pc.getSenders().forEach((sender) => {
  sender.transport.iceTransport.addEventListener(
    "gatheringstatechange",
    (ev) => {
      let transport = ev.target;

      if (transport.gatheringState === "complete") {
        /\* this transport has finished gathering candidates,
 but others may still be working on it \*/
      }
    },
    false,
  );
});
```

Likewise, you can use the `ongatheringstatechange` event handler property:

```js
pc.getSenders().forEach((sender) => {
  sender.transport.iceTransport.ongatheringstatechange = (ev) => {
    let transport = ev.target;

    if (transport.gatheringState === "complete") {
      /\* this transport has finished gathering candidates,
 but others may still be working on it \*/
    }
  };
});
```

Specifications
--------------

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # event-icetransport-gatheringstatechange |
| WebRTC: Real-Time Communication in Browsers # dom-rtcicetransport-ongatheringstatechange |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* WebRTC API
* WebRTC connectivity
### Related RTCIceTransport events

* `statechange`
* `selectedcandidatepairchange`
### Related RTCPeerConnection events

* `negotiationneeded`
* `signalingstatechange`
* `iceconnectionstatechange`
* `icegatheringstatechange`
* `connectionstatechange`


RTCIceTransport: component property - Web APIs

RTCIceTransport: component property
===================================

 The read-only **`RTCIceTransport`**
 property **`component`** specifies whether the object is
 serving to transport RTP or RTCP.

Value
-----

A string which is one of the following:

`rtp`

Identifies an ICE transport which is being used for the Real-time Transport Protocol (RTP), or for RTP multiplexed with the RTP Control Protocol (RTCP). RTP is defined in RFC 3550. This value corresponds to the component ID field in the `candidate` a-line with the value 1.

`rtcp`

Identifies an ICE transport being used for RTCP, which is defined in RFC 3550, section 6. This value corresponds to the component ID 2.

Specifications
--------------

#### No specification found

No specification data found for `api.RTCIceTransport.component`.
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


RTCIceTransport: getRemoteParameters() method - Web APIs

RTCIceTransport: getRemoteParameters() method
=============================================

 The **`RTCIceTransport`** method
 **`getRemoteParameters()`** returns an
 `RTCIceParameters` object which provides information uniquely
 identifying the remote peer for the duration of the ICE session.

 The remote peer's parameters are received during ICE signaling and delivered to the
 transport when the client calls
 `RTCPeerConnection.setRemoteDescription()`.

Syntax
------

```js
getRemoteParameters()
```

### Parameters

None.

### Return value

 An `RTCIceParameters` object indicating the
 `usernameFragment` and
 `password` which uniquely identify the
 remote peer for the duration of the ICE session.

Returns `null` if the parameters haven't been received yet.

Specifications
--------------

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-rtcicetransport-getremoteparameters |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


RTCIceTransport: getRemoteCandidates() method - Web APIs

RTCIceTransport: getRemoteCandidates() method
=============================================

 The **`RTCIceTransport`** method
 **`getRemoteCandidates()`** returns an array which contains
 one `RTCIceCandidate` for each of the candidates that have been received
 from the remote peer so far during the current ICE gathering
 session.

 Each time your signaling code calls `RTCPeerConnection.addIceCandidate()`
 to add a received candidate to the ICE session, the ICE agent places it in the list
 returned by this function.

Syntax
------

```js
getRemoteCandidates()
```

### Parameters

None.

### Return value

 An array containing one `RTCIceCandidate` object for each candidate that
 has been received so far from the remote peer during the current ICE candidate gathering
 session.

 It's important to keep in mind that there's no way to correlate these remote candidates
 with compatible local candidates. To find the best match found so far, call
 `RTCIceTransport.getSelectedCandidatePair()`.

Example
-------

 This simple example gets the remote candidate list from the
 `RTCIceTransport` for the first `RTCRtpSender` on the
 `RTCPeerConnection`, then outputs to the console all of the candidates in
 the list.

```js
const remoteCandidates = pc
  .getSenders()[0]
  .transport.transport.getRemoteCandidates();

remoteCandidates.forEach((candidate, index) => {
  console.log(`Candidate ${index}: ${candidate.candidate}`);
});
```

Specifications
--------------

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-rtcicetransport-getremotecandidates |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


RTCIceTransport: selectedcandidatepairchange event - Web APIs

RTCIceTransport: selectedcandidatepairchange event
==================================================

A **`selectedcandidatepairchange`** event is sent to an `RTCIceTransport` when the ICE agent selects a new pair of candidates that describe the endpoints of a viable connection.

The pair of candidates is in turn described by an `RTCIceCandidatePair` object which contains one `RTCIceCandidate` representing the local end of the connection, and another representing the remote end of the connection.

Together, the candidates can be used to establish a connection to be used by the `RTCIceTransport`, and, by extension, by an `RTCPeerConnection`.

This event is not cancelable and does not bubble.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.

```js
addEventListener("selectedcandidatepairchange", (event) => {});

onselectedcandidatepairchange = (event) => {};
```

Event type
----------

A generic `Event`.

Examples
--------

This example creates an event handler for `selectedcandidatepairchange` that updates a display providing the user information about the progress of the ICE negotiation for an `RTCPeerConnection` called `pc`.

```js
let iceTransport = pc.getSenders[0].transport.iceTransport;
let localProtoElem = document.getElementById("local-protocol");
let remoteProtoElem = document.getElementById("remote-protocol");

iceTransport.addEventListener(
  "selectedcandidatepairchange",
  (ev) => {
    let pair = iceTransport.getSelectedCandidatePair();
    localProtoElem.innerText = pair.local.protocol.toUpperCase();
    remoteProtoElem.innerText = pair.remote.protocol.toUpperCase();
  },
  false,
);
```

This can also be done by setting the `onselectedcandidatepairchange` event handler property directly.

```js
let iceTransport = pc.getSenders[0].transport.iceTransport;
let localProtoElem = document.getElementById("local-protocol");
let remoteProtoElem = document.getElementById("remote-protocol");

iceTransport.onselectedcandidatepairchange = (ev) => {
  let pair = iceTransport.getSelectedCandidatePair();
  localProtoElem.innerText = pair.local.protocol.toUpperCase();
  remoteProtoElem.innerText = pair.remote.protocol.toUpperCase();
};
```

Specifications
--------------

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # event-icetransport-selectedcandidatepairchange |
| WebRTC: Real-Time Communication in Browsers # dom-rtcicetransport-onselectedcandidatepairchange |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* WebRTC API
* WebRTC connectivity
### Related RTCIceTransport events

* `statechange`
* `gatheringstatechange`
### Related RTCPeerConnection events

* `negotiationneeded`
* `signalingstatechange`
* `iceconnectionstatechange`
* `icegatheringstatechange`
* `connectionstatechange`


RTCIceTransport: role property - Web APIs

RTCIceTransport: role property
==============================

 The read-only **`RTCIceTransport`**
 property **`role`** indicates which ICE role
 the transport is fulfilling: that of the controlling agent, or the agent that is being
 controlled.

 You can learn more about ICE roles in
 Choosing a candidate pair.

Value
-----

A string specifying whether the `RTCIceTransport` represents the controlling agent or the controlled agent.

The value must be one of the following:

`"controlled"`

The transport is the controlled agent.

`"controlling"`

The `RTCIceTransport` object is serving as the controlling agent.

`"unknown"`

The role has not yet been determined.

Specifications
--------------

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-icetransport-role |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


RTCIceTransport: gatheringState property - Web APIs

RTCIceTransport: gatheringState property
========================================

The read-only property **`gatheringState`** property of the `RTCIceTransport` interface returns a string that indicates the current gathering state of the ICE agent: `"new"`, `"gathering"`, or `"complete"`.

Value
-----

A string that indicates the current state of the ICE agent's candidate gathering process:

`"new"`

The `RTCIceTransport` is newly created and has not yet started to gather ICE candidates.

`"gathering"`

The transport is in the process of gathering candidates.

`"complete"`

The transport has finished gathering ICE candidates and has sent the end-of-candidates indicator to the remote device. The transport won't gather any further candidates unless an ICE restart occurs, at which point the gathering process starts over from scratch.

Specifications
--------------

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-icetransport-gatheringstate |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


RTCIceTransport: getLocalParameters() method - Web APIs

RTCIceTransport: getLocalParameters() method
============================================

 The **`RTCIceTransport`** method
 **`getLocalParameters()`** returns an
 `RTCIceParameters` object which provides information uniquely identifying
 the local peer for the duration of the ICE session.

 The local peer's parameters are obtained during ICE signaling and delivered to the
 transport when the client calls `RTCPeerConnection.setLocalDescription()`.

Syntax
------

```js
getLocalParameters()
```

### Parameters

None.

### Return value

 An `RTCIceParameters` object indicating the
 `usernameFragment` and
 `password` which uniquely identify the local
 peer for the duration of the ICE session.

Returns `null` if the parameters have not yet been received.

Specifications
--------------

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-rtcicetransport-getlocalparameters |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


RTCIceTransport: statechange event - Web APIs

RTCIceTransport: statechange event
==================================

A **`statechange`** event occurs when the `RTCIceTransport` changes state. The `state` can be used to determine how far through the process of examining, verifying, and selecting a valid candidate pair is prior to successfully connecting the two peers for WebRTC communications.

This event is not cancelable and does not bubble.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.

```js
addEventListener("statechange", (event) => {});

onstatechange = (event) => {};
```

Event type
----------

A generic `Event`.

Examples
--------

Given an `RTCPeerConnection`, `pc`, the following code creates an event handler that calls a function named `handleFailure()` if the ICE transport enters a failure state.

```js
let iceTransport = pc.getSenders()[0].transport.iceTransport;

iceTransport.addEventListener(
  "statechange",
  (ev) => {
    if (iceTransport.state === "failed") {
      handleFailure(pc);
    }
  },
  false,
);
```

The same code, using the `onstatechange` event handler property, looks like this:

```js
let iceTransport = pc.getSenders()[0].transport.iceTransport;

iceTransport.onstatechange = (ev) => {
  if (iceTransport.state === "failed") {
    handleFailure(pc);
  }
};
```

Specifications
--------------

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # event-icetransport-statechange |
| WebRTC: Real-Time Communication in Browsers # dom-rtcicetransport-onstatechange |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* WebRTC API
* WebRTC connectivity
### Related RTCIceTransport events

* `gatheringstatechange`
* `selectedcandidatepairchange`
### Related RTCPeerConnection events

* `negotiationneeded`
* `signalingstatechange`
* `iceconnectionstatechange`
* `icegatheringstatechange`
* `connectionstatechange`


RTCIceTransport: getSelectedCandidatePair() method - Web APIs

RTCIceTransport: getSelectedCandidatePair() method
==================================================

 The `RTCIceTransport` method
 **`getSelectedCandidatePair()`** returns an
 `RTCIceCandidatePair` object containing the current best-choice pair
 of ICE candidates describing the configuration of the endpoints of the transport.

Syntax
------

```js
getSelectedCandidatePair()
```

### Parameters

None.

### Return value

 A `RTCIceCandidatePair` object describing the configurations of the
 currently-selected candidate pair's two endpoints.
 `local` describes the configuration of the
 local end of the connection, while `remote`
 describes the remote peer's configuration.

The return value is `null` if no pair of candidates has been selected yet.

Usage notes
-----------

 As the ICE agent performs negotiation of a `RTCPeerConnection`, it gathers
 and analyzes candidate configurations from each the two peers. As soon as it finds an
 acceptable matching pair of candidates, meeting the requirements for the connection, a
 `selectedcandidatepairchange` event is fired at the
 `RTCIceTransport`. From that time forward, the best matching pair of
 candidates will always be available by calling
 `getSelectedCandidatePair()`.

 As ICE negotiation continues, any time a pair of candidates is discovered that is
 better than the currently-selected pair, the new pair is selected, replacing the
 previous pairing, and the `selectedcandidatepairchange` event is fired again.

**Note:** It's possible for one of the configurations in the selected candidate pair to remain unchanged when a new pairing is chosen.

Examples
--------

See `RTCIceTransport.onselectedcandidatepairchange` for example code.

Specifications
--------------

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-rtcicetransport-getselectedcandidatepair |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


RTCIceTransport: getLocalCandidates() method - Web APIs

RTCIceTransport: getLocalCandidates() method
============================================

 The **`RTCIceTransport`** method
 **`getLocalCandidates()`** returns an array of
 `RTCIceCandidate` objects, one for each of the candidates that have been
 gathered by the local device during the current ICE agent
 session.

 The local candidates are placed in this list by the ICE agent prior to being delivered
 to the local client's code in an `icecandidate` event so that the client can
 forward the candidates to the remote peer.

Syntax
------

```js
getLocalCandidates()
```

### Parameters

None.

### Return value

 A JavaScript `Array` containing one `RTCIceCandidate` object
 for each candidate that has been identified so far during the ICE candidate gathering
 session.

 You can't correlate these local candidates with matching remote candidates. To find the
 best match found so far, call `RTCIceTransport.getSelectedCandidatePair()`.

Examples
--------

 This simple example gets the local candidate list from the
 `RTCIceTransport` for the first `RTCRtpSender` on the
 `RTCPeerConnection`, then outputs to the console all of the candidates in
 the list.

```js
const localCandidates = pc
  .getSenders()[0]
  .transport.transport.getLocalCandidates();

localCandidates.forEach((candidate, index) => {
  console.log(`Candidate ${index}: ${candidate.candidate}`);
});
```

Specifications
--------------

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-rtcicetransport-getlocalcandidates |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


RTCIceTransport: state property - Web APIs

RTCIceTransport: state property
===============================

 The read-only **`RTCIceTransport`**
 property **`state`** returns the current state of the ICE
 transport, so you can determine the state of ICE gathering in which the ICE agent
 currently is operating.

 This differs from the `gatheringState`,
 which only indicates whether or not ICE gathering is currently underway.

Value
-----

A string whose value is one of the following:

`"new"`

The `RTCIceTransport` is currently gathering local candidates, or is waiting for the remote device to begin to transmit the remote candidates, or both. In this state, checking of candidates to look for those which might be acceptable has not yet begun.

`"checking"`

At least one remote candidate has been received, and the `RTCIceTransport` has begun examining pairings of remote and local candidates in order to attempt to identify viable pairs that could be used to establish a connection. Keep in mind that gathering of local candidates may still be underway, and, similarly, the remote device also may still be gathering candidates of its own.

`"connected"`

A viable candidate pair has been found and selected, and the `RTCIceTransport` has connected the two peers together using that pair. However, there are still candidates pairings to consider, and there may still be gathering underway on one or both of the two devices.

The transport may revert from the `"connected"` state to the `"checking"` state if either peer decides to cancel consent to use the selected candidate pair, and may revert to `"disconnected"` if there are no candidates left to check but one or both clients are still gathering candidates.

`"completed"`

The transport has finished gathering local candidates and has received a notification from the remote peer that no more candidates will be sent. In addition, all candidate pairs have been considered and a pair has been selected for use. If consent checks fail on all successful candidate pairs, the transport state will change to `"failed"`.

`"disconnected"`

The ICE agent has determined that connectivity has been lost for this `RTCIceTransport`. This is not a failure state (that's `"failed"`). A value of `"disconnected"` means that a transient issue has occurred that has broken the connection, but that should resolve itself automatically without your code having to take any action. See The disconnected state for additional details.

`"failed"`

The `RTCIceTransport` has finished the gathering process, has received the "no more candidates" notification from the remote peer, and has finished checking pairs of candidates, without successfully finding a pair that is both valid and for which consent can be obtained. *This is a terminal state, indicating that the connection cannot be achieved or maintained.*

`"closed"`

The transport has shut down and is no longer responding to STUN requests.

Usage notes
-----------

If an ICE restart occurs, the candidate gathering and connectivity check process is started over again; this will cause a transition from the `"connected"` state if the restart occurred while the state was `"completed"`. If the restart occurred during a transient `"disconnected"` state, the state transitions to `"checking"`

### The disconnected state

`"disconnected"` is a transient state that occurs when the connection between the two peers fails in a manner that the WebRTC infrastructure can automatically correct once the connection is available again. It is *not* a failure state. Instead, you can think of `"disconnected"` as being similar to `"checking"` but with the added information that the connection had been working but at the moment is not.

Every user agent and platform may have its own scenarios that can trigger the `"disconnected"` state. Possible causes include:

* The network interface being used by the connection has gone offline.
* STUN requests being sent to the remote device have gone unanswered repeatedly.

The `"disconnected"` state can also occur when the transport has finished checking all existing candidate pairs and has not found a pair that will work—or a valid pair was found but rejected due to consent to use the pair being denied. In this scenario, the transport is still continuing to gather candidates, and/or to wait for candidates to be sent by the remote peer.

Specifications
--------------

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-icetransport-state |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


ElementInternals: validity property - Web APIs

ElementInternals: validity property
===================================

Baseline 2023
-------------

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

* Learn more
* See full compatibility
* Report feedback
The **`validity`** read-only property of the `ElementInternals` interface returns a `ValidityState` object which represents the different validity states the element can be in, with respect to constraint validation.

Value
-----

A `ValidityState` object.

### Exceptions

`NotSupportedError` `DOMException`

Thrown if the element does not have its `formAssociated` property set to `true`.

Examples
--------

The following example shows a custom checkbox component with `formAssociated` set to `true`, the value of `validity.valid` is logged to the console.

```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_.validity.valid);
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-elementinternals-validity |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


ElementInternals: ariaColCount property - Web APIs

ElementInternals: ariaColCount property
=======================================

The **`ariaColCount`** property of the `ElementInternals` interface reflects the value of the `aria-colcount` attribute, which defines the number of columns in a table, grid, or treegrid.

**Note:** Setting aria attributes on `ElementInternals` allows default semantics to be defined on a custom element. These may be overwritten by author-defined attributes, but ensure that default semantics are retained should the author delete those attributes, or fail to add them at all. For more information see the Accessibility Object Model explainer.

Value
-----

A string.

Examples
--------

In this example the `aria-colcount` attribute is set to "3".

```js
this.internals_.ariaColCount = "3";
```

Specifications
--------------

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariacolcount |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

* ARIA: table role


ElementInternals: ariaMultiSelectable property - Web APIs

ElementInternals: ariaMultiSelectable property
==============================================

The **`ariaMultiSelectable`** property of the `ElementInternals` interface reflects the value of the `aria-multiselectable` attribute, which indicates that the user may select more than one item from the current selectable descendants.

**Note:** Setting aria attributes on `ElementInternals` allows default semantics to be defined on a custom element. These may be overwritten by author-defined attributes, but ensure that default semantics are retained should the author delete those attributes, or fail to add them at all. For more information see the Accessibility Object Model explainer.

Value
-----

A string with one of the following values:

`"true"`

More than one item may be selected at a time.

`"false"`

Only one item may be selected.

Examples
--------

In this example the value of `ariaMultiSelectable` is set to "true".

```js
this.internals_.ariaMultiSelectable = "true";
```

Specifications
--------------

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariamultiselectable |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* ARIA: listbox role


ElementInternals: ariaLive property - Web APIs

ElementInternals: ariaLive property
===================================

The **`ariaLive`** property of the `ElementInternals` interface reflects the value of the `aria-live` attribute, which indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.

**Note:** Setting aria attributes on `ElementInternals` allows default semantics to be defined on a custom element. These may be overwritten by author-defined attributes, but ensure that default semantics are retained should the author delete those attributes, or fail to add them at all. For more information see the Accessibility Object Model explainer.

Value
-----

A string with one of the following values:

`"assertive"`

Indicates that updates to the region have the highest priority and should be presented the user immediately.

`"off"`

Indicates that updates to the region should not be presented to the user unless the user is currently focused on that region.

`"polite"`

Indicates that updates to the region should be presented at the next graceful opportunity, such as at the end of speaking the current sentence or when the user pauses typing.

Examples
--------

In this example the value of `ariaLive` is set to "assertive".

```js
this.internals_.ariaLive = "assertive";
```

Specifications
--------------

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-arialive |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


ElementInternals: ariaSetSize property - Web APIs

ElementInternals: ariaSetSize property
======================================

The **`ariaSetSize`** property of the `ElementInternals` interface reflects the value of the `aria-setsize` attribute, which defines the number of items in the current set of listitems or treeitems.

**Note:** Setting aria attributes on `ElementInternals` allows default semantics to be defined on a custom element. These may be overwritten by author-defined attributes, but ensure that default semantics are retained should the author delete those attributes, or fail to add them at all. For more information see the Accessibility Object Model explainer.

Value
-----

A string containing an integer.

Examples
--------

In this example the value of `ariaSetSize` is set to "4".

```js
this.internals_.ariaSetSize = "4";
```

Specifications
--------------

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariasetsize |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* ARIA: tab role


ElementInternals: ariaAutoComplete property - Web APIs

ElementInternals: ariaAutoComplete property
===========================================

The **`ariaAutoComplete`** property of the `ElementInternals` interface reflects the value of the `aria-autocomplete` attribute, which indicates whether inputting text could trigger display of one or more predictions of the user's intended value for a combobox, searchbox, or textbox and specifies how predictions would be presented if they were made.

**Note:** Setting aria attributes on `ElementInternals` allows default semantics to be defined on a custom element. These may be overwritten by author-defined attributes, but ensure that default semantics are retained should the author delete those attributes, or fail to add them at all. For more information see the Accessibility Object Model explainer.

Value
-----

A string with one of the following values:

`"inline"`

When a user is providing input, text suggesting one way to complete the provided input may be dynamically inserted after the caret.

`"list"`

When a user is providing input, an element containing a collection of values that could complete the provided input may be displayed.

`"both"`

When a user is providing input, an element containing a collection of values that could complete the provided input may be displayed. If displayed, one value in the collection is automatically selected, and the text needed to complete the automatically selected value appears after the caret in the input.

`"none"`

When a user is providing input, there is no display of an automatic suggestion that attempts to predict how the user intends to complete the input.

Examples
--------

In this example the value of `ariaAutoComplete` is set to "inline".

```js
this.internals_.ariaAutoComplete = "inline";
```

Specifications
--------------

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariaautocomplete |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


ElementInternals: ariaPlaceholder property - Web APIs

ElementInternals: ariaPlaceholder property
==========================================

The **`ariaPlaceholder`** property of the `ElementInternals` interface reflects the value of the `aria-placeholder` attribute, which defines a short hint intended to aid the user with data entry when the control has no value.

**Note:** Setting aria attributes on `ElementInternals` allows default semantics to be defined on a custom element. These may be overwritten by author-defined attributes, but ensure that default semantics are retained should the author delete those attributes, or fail to add them at all. For more information see the Accessibility Object Model explainer.

Value
-----

A string.

Examples
--------

In this example the value of `ariaPlaceholder` is set to "12345".

```js
this.internals_.ariaPlaceholder = "12345";
```

Specifications
--------------

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariaplaceholder |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* ARIA: textbox role


ElementInternals: ariaLabel property - Web APIs

ElementInternals: ariaLabel property
====================================

}
The **`ariaLabel`** property of the `ElementInternals` interface reflects the value of the `aria-label` attribute, which defines a string value that labels the current Element.

**Note:** Setting aria attributes on `ElementInternals` allows default semantics to be defined on a custom element. These may be overwritten by author-defined attributes, but ensure that default semantics are retained should the author delete those attributes, or fail to add them at all. For more information see the Accessibility Object Model explainer.

Value
-----

A string.

Examples
--------

In this example the value of `ariaLabel` is set to "close".

```js
this.internals_.ariaLabel = "close";
```

Specifications
--------------

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-arialabel |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


ElementInternals: checkValidity() method - Web APIs

ElementInternals: checkValidity() method
========================================

Baseline 2023
-------------

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

* Learn more
* See full compatibility
* Report feedback
The **`checkValidity()`** method of the `ElementInternals` interface checks if the element meets any constraint validation rules applied to it.

If `checkValidity` returns `false` then a cancelable invalid event is fired on the element.

Syntax
------

```js
checkValidity()
```

### Parameters

None.

### Return value

A boolean value, `true` if the element meets all validation constraints.

### Exceptions

`NotSupportedError` `DOMException`

Thrown if the element does not have its `formAssociated` property set to `true`.

Examples
--------

In the following example `ElementInternals.setValidity()` is used to indicate that the element does not meet validation rules. Calling `checkValidity()` returns `false`. After calling `setValidity` again, this time indicating that all rules are marked false, `checkValidity()` returns `true`.

```js
let element = document.getElementById("join-checkbox");
element.internals_.setValidity({ valueMissing: true }, "my message");
console.log(element.internals_.checkValidity()); // false
element.internals_.setValidity({});
console.log(element.internals_.checkValidity()); // true
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-elementinternals-checkvalidity |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


ElementInternals: ariaChecked property - Web APIs

ElementInternals: ariaChecked property
======================================

The **`ariaChecked`** property of the `ElementInternals` interface reflects the value of the `aria-checked` attribute, which indicates the current "checked" state of checkboxes, radio buttons, and other widgets that have a checked state.

**Note:** Setting aria attributes on `ElementInternals` allows default semantics to be defined on a custom element. These may be overwritten by author-defined attributes, but ensure that default semantics are retained should the author delete those attributes, or fail to add them at all. For more information see the Accessibility Object Model explainer.

Value
-----

A string with one of the following values:

`"true"`

The element is checked.

`"mixed"`

Indicates a mixed mode value for a tri-state checkbox or menuitemcheckbox.

`"false"`

The element supports being checked but is not currently checked.

`"undefined"`

The element does not support being checked.

Examples
--------

In this example the value of `ariaChecked` is set to "true".

```js
this.internals_.ariaChecked = "true";
```

Specifications
--------------

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariachecked |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* ARIA: checkbox role


ElementInternals: ariaMultiLine property - Web APIs

ElementInternals: ariaMultiLine property
========================================

The **`ariaMultiLine`** property of the `ElementInternals` interface reflects the value of the `aria-multiline` attribute, which indicates whether a text box accepts multiple lines of input or only a single line.

**Note:** Setting aria attributes on `ElementInternals` allows default semantics to be defined on a custom element. These may be overwritten by author-defined attributes, but ensure that default semantics are retained should the author delete those attributes, or fail to add them at all. For more information see the Accessibility Object Model explainer.

Value
-----

A string with one of the following values:

`"true"`

This is a multi-line text box.

`"false"`

This is a single-line text box.

Examples
--------

In this example the value of `ariaMultiLine` is set to "true".

```js
this.internals_.ariaMultiLine = "true";
```

Specifications
--------------

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariamultiline |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* ARIA: textbox role


ElementInternals: ariaColIndex property - Web APIs

ElementInternals: ariaColIndex property
=======================================

The **`ariaColIndex`** property of the `ElementInternals` interface reflects the value of the `aria-colindex` attribute, which defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.

**Note:** Setting aria attributes on `ElementInternals` allows default semantics to be defined on a custom element. These may be overwritten by author-defined attributes, but ensure that default semantics are retained should the author delete those attributes, or fail to add them at all. For more information see the Accessibility Object Model explainer.

Value
-----

A string which contains an integer.

Examples
--------

In this example the value of `ariaColIndex` is set to "2".

```js
this.internals_.ariaColIndex = "2";
```

Specifications
--------------

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariacolindex |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* ARIA: table role


ElementInternals: ariaRowSpan property - Web APIs

ElementInternals: ariaRowSpan property
======================================

The **`ariaRowSpan`** property of the `ElementInternals` interface reflects the value of the `aria-rowspan` attribute, which defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.

**Note:** Setting aria attributes on `ElementInternals` allows default semantics to be defined on a custom element. These may be overwritten by author-defined attributes, but ensure that default semantics are retained should the author delete those attributes, or fail to add them at all. For more information see the Accessibility Object Model explainer.

Value
-----

A string which contains an integer.

Examples
--------

In this example the value of `ariaRowSpan` is set to "2".

```js
this.internals_.ariaRowSpan = "2";
```

Specifications
--------------

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariarowspan |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* ARIA: table role


ElementInternals: form property - Web APIs

ElementInternals: form property
===============================

The **`form`** read-only property of the `ElementInternals` interface returns the `HTMLFormElement` associated with this element.

Value
-----

An `HTMLFormElement`.

Examples
--------

 The following example shows a custom checkbox component inside a form with an ID of `myForm`.
 Printing `form.length` to the console, gives us the value of `HTMLFormElement.length`.

```html
<form id="myForm">
  <custom-checkbox id="custom-checkbox"></custom-checkbox>
  <custom-label for="custom-checkbox">Join newsletter</custom-label>
</form>
```

```js
class CustomCheckbox extends HTMLElement {
  static formAssociated = true;
  #internals;

  constructor() {
    super();
    this.#internals = this.attachInternals();
  }

  connectedCallback() {
    console.log(this.#internals.form.length);
  }
}

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

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-elementinternals-form |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


ElementInternals: ariaRequired property - Web APIs

ElementInternals: ariaRequired property
=======================================

The **`ariaRequired`** property of the `Element` interface reflects the value of the `aria-required` attribute, which indicates that user input is required on the element before a form may be submitted.

**Note:** Setting aria attributes on `ElementInternals` allows default semantics to be defined on a custom element. These may be overwritten by author-defined attributes, but ensure that default semantics are retained should the author delete those attributes, or fail to add them at all. For more information see the Accessibility Object Model explainer.

Value
-----

A string with one of the following values:

`"true"`

Users need to provide input on an element before a form is submitted.

`"false"`

User input is not necessary to submit the form.

Examples
--------

In this example the value of `ariaRequired` is set to "true".

```js
this.internals_.ariaRequired = "true";
```

Specifications
--------------

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariarequired |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* ARIA: textbox role


ElementInternals.ariaColIndexText - Web APIs

ElementInternals.ariaColIndexText
=================================

**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The **`ariaColIndexText`** property of the `ElementInternals` interface reflects the value of the `aria-colindextext` attribute, which defines a human readable text alternative of aria-colindex.

**Note:** Setting aria attributes on `ElementInternals` allows default semantics to be defined on a custom element. These may be overwritten by author-defined attributes, but ensure that default semantics are retained should the author delete those attributes, or fail to add them at all. For more information see the Accessibility Object Model explainer.

Value
-----

A string.

Examples
--------

In this example the value of `ariaColIndexText` is set to "Column name".

```js
this.internals_.ariaColIndexText = "Column name";
```

Specifications
--------------

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariacolindextext |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* ARIA: table role


ElementInternals: ariaModal property - Web APIs

ElementInternals: ariaModal property
====================================

The **`ariaModal`** property of the `ElementInternals` interface reflects the value of the `aria-modal` attribute, which indicates whether an element is modal when displayed.

**Note:** Setting aria attributes on `ElementInternals` allows default semantics to be defined on a custom element. These may be overwritten by author-defined attributes, but ensure that default semantics are retained should the author delete those attributes, or fail to add them at all. For more information see the Accessibility Object Model explainer.

Value
-----

A string with one of the following values:

`"true"`

The element is modal.

`"false"`

The element is not modal.

Examples
--------

In this example the value of `ariaModal` is set to "true".

```js
this.internals_.ariaModal = "true";
```

Specifications
--------------

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariamodal |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* ARIA: dialog role


ElementInternals: ariaValueText property - Web APIs

ElementInternals: ariaValueText property
========================================

The **`ariaValueText`** property of the `ElementInternals` interface reflects the value of the `aria-valuetext` attribute, which defines the human-readable text alternative of aria-valuenow for a range widget.

**Note:** Setting aria attributes on `ElementInternals` allows default semantics to be defined on a custom element. These may be overwritten by author-defined attributes, but ensure that default semantics are retained should the author delete those attributes, or fail to add them at all. For more information see the Accessibility Object Model explainer.

Value
-----

A string.

Examples
--------

In this example the value of `ariaValueText` is set to "Sunday".

```js
this.internals_.ariaValueText = "Sunday";
```

Specifications
--------------

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariavaluetext |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


ElementInternals: reportValidity() method - Web APIs

ElementInternals: reportValidity() method
=========================================

Baseline 2023
-------------

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

* Learn more
* See full compatibility
* Report feedback
The **`reportValidity()`** method of the `ElementInternals` interface checks if the element meets any constraint validation rules applied to it.

If `reportValidity` returns `false` then a cancelable invalid event is fired on the element.

This method behaves in a similar way to `ElementInternals.checkValidity()`, however it additionally sends the value of `ElementInternals.validationMessage` to the user agent for display.

Syntax
------

```js
reportValidity()
```

### Parameters

None.

### Return value

A boolean value, `true` if the element meets all validation constraints.

### Exceptions

`NotSupportedError` `DOMException`

Thrown if the element does not have its `formAssociated` property set to `true`.

Examples
--------

In the following example `ElementInternals.setValidity()` is used to indicate that the element does not meet validation rules. Calling `reportValidity()` returns `false`, and the value "my message" is sent to the user agent for display.

After calling `setValidity` again, this time indicating that all rules are marked false, `reportValidity()` returns `true`.

```js
let element = document.getElementById("join-checkbox");
element.internals_.setValidity({ valueMissing: true }, "my message");
console.log(element.internals_.reportValidity()); // false
element.internals_.setValidity({});
console.log(element.internals_.reportValidity()); // true
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-elementinternals-reportvalidity |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


ElementInternals: shadowRoot property - Web APIs

ElementInternals: shadowRoot property
=====================================

The **`shadowRoot`** read-only property of the `ElementInternals` interface returns the `ShadowRoot` for this element.

Value
-----

A `ShadowRoot` if the element has a shadow root, otherwise `null`.

Examples
--------

The following example prints the value of `shadowRoot` to the console, immediately after calling `HTMLElement.attachInternals()`. At this point the value is `null`. After calling `Element.attachShadow()` the element has a Shadow Root, and `shadowRoot` returns the object representing it.

```js
class MyCustomElement extends HTMLElement {
  constructor() {
    super();
    this.internals_ = this.attachInternals();

    console.log(this.internals_.shadowRoot); // null

    this.attachShadow({ mode: "open" });

    console.log(this.internals_.shadowRoot); // a ShadowRoot object
  }
}
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-elementinternals-shadowroot |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


ElementInternals: ariaPosInSet property - Web APIs

ElementInternals: ariaPosInSet property
=======================================

The **`ariaPosInSet`** property of the `ElementInternals` interface reflects the value of the `aria-posinset` attribute, which defines an element's number or position in the current set of listitems or treeitems.

**Note:** Setting aria attributes on `ElementInternals` allows default semantics to be defined on a custom element. These may be overwritten by author-defined attributes, but ensure that default semantics are retained should the author delete those attributes, or fail to add them at all. For more information see the Accessibility Object Model explainer.

Value
-----

A string containing an integer.

Examples
--------

In this example the value of `ariaPosInSet` is set to "2".

```js
this.internals_.ariaPosInSet = "2";
```

Specifications
--------------

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariaposinset |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


ElementInternals: ariaRoleDescription property - Web APIs

ElementInternals: ariaRoleDescription property
==============================================

The **`ariaRoleDescription`** property of the `Element` interface reflects the value of the `aria-roledescription` attribute, which defines a human-readable, author-localized description for the role of an element.

**Note:** Setting aria attributes on `ElementInternals` allows default semantics to be defined on a custom element. These may be overwritten by author-defined attributes, but ensure that default semantics are retained should the author delete those attributes, or fail to add them at all. For more information see the Accessibility Object Model explainer.

Value
-----

A string.

Examples
--------

In this example the value of `ariaRoleDescription` is set to "My custom widget".

```js
this.internals_.ariaRoleDescription = "My custom widget";
```

Specifications
--------------

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariaroledescription |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

* ARIA: application role


ElementInternals: ariaSort property - Web APIs

ElementInternals: ariaSort property
===================================

The **`ariaSort`** property of the `ElementInternals` interface reflects the value of the `aria-sort` attribute, which indicates if items in a table or grid are sorted in ascending or descending order.

**Note:** Setting aria attributes on `ElementInternals` allows default semantics to be defined on a custom element. These may be overwritten by author-defined attributes, but ensure that default semantics are retained should the author delete those attributes, or fail to add them at all. For more information see the Accessibility Object Model explainer.

Value
-----

A string with one of the following values:

`"ascending"`

Items are sorted in ascending order by this column.

`"descending"`

Items are sorted in descending order by this column.

`"none"`

There is no defined sort applied to the column.

`"other"`

A sort algorithm other than ascending or descending has been applied.

Examples
--------

In this example the value of `ariaSort` is set to "ascending".

```js
this.internals_.ariaSort = "ascending";
```

Specifications
--------------

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariasort |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* ARIA: table role


ElementInternals: ariaBusy property - Web APIs

ElementInternals: ariaBusy property
===================================

The **`ariaBusy`** property of the `ElementInternals` interface reflects the value of the `aria-busy` attribute, which indicates whether an element is being modified, as assistive technologies may want to wait until the modifications are complete before exposing them to the user.

**Note:** Setting aria attributes on `ElementInternals` allows default semantics to be defined on a custom element. These may be overwritten by author-defined attributes, but ensure that default semantics are retained should the author delete those attributes, or fail to add them at all. For more information see the Accessibility Object Model explainer.

Value
-----

A string with one of the following values:

`"true"`

The element is being updated.

`"false"`

There are no expected updates for the element.

Examples
--------

In this example the value of `ariaBusy` is set to "true".

```js
this.internals_.ariaBusy = "true";
```

Specifications
--------------

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariabusy |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


ElementInternals.ariaRowIndexText - Web APIs

ElementInternals.ariaRowIndexText
=================================

**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The **`ariaRowIndexText`** property of the `ElementInternals` interface reflects the value of the `aria-rowindextext` attribute, which defines a human readable text alternative of aria-rowindex.

**Note:** Setting aria attributes on `ElementInternals` allows default semantics to be defined on a custom element. These may be overwritten by author-defined attributes, but ensure that default semantics are retained should the author delete those attributes, or fail to add them at all. For more information see the Accessibility Object Model explainer.

Value
-----

A string.

Examples
--------

In this example the value of `ariaRowIndexText` is set to "Heading row".

```js
this.internals_.ariaRowIndexText = "Heading row";
```

Specifications
--------------

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariarowindextext |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* ARIA: table role


ElementInternals: ariaAtomic property - Web APIs

ElementInternals: ariaAtomic property
=====================================

The **`ariaAtomic`** property of the `ElementInternals` interface reflects the value of the `aria-atomic` attribute, which indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the `aria-relevant` attribute.

**Note:** Setting aria attributes on `ElementInternals` allows default semantics to be defined on a custom element. These may be overwritten by author-defined attributes, but ensure that default semantics are retained should the author delete those attributes, or fail to add them at all. For more information see the Accessibility Object Model explainer.

Value
-----

A string with one of the following values:

`"false"`

Assistive technologies will present only the changed node or nodes.

`"true"`

Assistive technologies will present the entire changed region as a whole, including the author-defined label if one exists.

Examples
--------

In this example the value of `ariaAtomic` is set to "true" in the constructor for a custom element .

```js
class MyCustomElement extends HTMLElement {
  constructor() {
    super();
    this.internals_ = this.attachInternals();
    this.internals_.ariaAtomic = "true";
  }
}
```

Specifications
--------------

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariaatomic |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


ElementInternals: ariaHasPopup property - Web APIs

ElementInternals: ariaHasPopup property
=======================================

The **`ariaHasPopup`** property of the `ElementInternals` interface reflects the value of the `aria-haspopup` attribute, which indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.

**Note:** Setting aria attributes on `ElementInternals` allows default semantics to be defined on a custom element. These may be overwritten by author-defined attributes, but ensure that default semantics are retained should the author delete those attributes, or fail to add them at all. For more information see the Accessibility Object Model explainer.

Value
-----

A string with one of the following values:

`"false"`

The element does not have a popup.

`"true"`

The element has a popup that is a menu.

`"menu"`

The element has a popup that is a menu.

`"listbox"`

The element has a popup that is a listbox.

`"tree"`

The element has a popup that is a tree.

`"grid"`

The element has a popup that is a grid.

`"dialog"`

The element has a popup that is a dialog.

Examples
--------

In this example the value of `ariaHasPopup` is set to "true".

```js
this.internals_.ariaHasPopup = "true";
```

Specifications
--------------

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariahaspopup |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


ElementInternals: ariaPressed property - Web APIs

ElementInternals: ariaPressed property
======================================

The **`ariaPressed`** property of the `ElementInternals` interface reflects the value of the `aria-pressed` attribute, which indicates the current "pressed" state of toggle buttons.

**Note:** Setting aria attributes on `ElementInternals` allows default semantics to be defined on a custom element. These may be overwritten by author-defined attributes, but ensure that default semantics are retained should the author delete those attributes, or fail to add them at all. For more information see the Accessibility Object Model explainer.

Value
-----

A string with one of the following values:

`"true"`

The element is pressed.

`"false"`

The element supports being pressed but is not currently pressed.

`"mixed"`

Indicates a mixed mode value for a tri-state toggle button.

`"undefined"`

The element does not support being pressed.

Examples
--------

In this example the value of `ariaPressed` is set to "true".

```js
this.internals_.ariaPressed = "true";
```

Specifications
--------------

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariapressed |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* ARIA: button role


ElementInternals: ariaRowIndex property - Web APIs

ElementInternals: ariaRowIndex property
=======================================

The **`ariaRowIndex`** property of the `ElementInternals` interface reflects the value of the `aria-rowindex` attribute, which defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.

**Note:** Setting aria attributes on `ElementInternals` allows default semantics to be defined on a custom element. These may be overwritten by author-defined attributes, but ensure that default semantics are retained should the author delete those attributes, or fail to add them at all. For more information see the Accessibility Object Model explainer.

Value
-----

A string which contains an integer.

Examples
--------

In this example the value of `ariaRowIndex` is set to "1".

```js
this.internals_.ariaRowIndex = "1";
```

Specifications
--------------

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariarowindex |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* ARIA: table role


ElementInternals: ariaHidden property - Web APIs

ElementInternals: ariaHidden property
=====================================

The **`ariaHidden`** property of the `ElementInternals` interface reflects the value of the `aria-hidden` attribute, which indicates whether the element is exposed to an accessibility API.

**Note:** Setting aria attributes on `ElementInternals` allows default semantics to be defined on a custom element. These may be overwritten by author-defined attributes, but ensure that default semantics are retained should the author delete those attributes, or fail to add them at all. For more information see the Accessibility Object Model explainer.

Value
-----

A string with one of the following values:

`"true"`

The element is hidden from the accessibility API.

`"false"`

The element is exposed to the accessibility API as if it were rendered.

`undefined`

The element's hidden state is determined by the user agent based on whether it is rendered.

Examples
--------

In this example the value of `ariaHidden` is set to "true".

```js
this.internals_.ariaHidden = "true";
```

Specifications
--------------

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariahidden |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


ElementInternals: ariaCurrent property - Web APIs

ElementInternals: ariaCurrent property
======================================

The **`ariaCurrent`** property of the `ElementInternals` interface reflects the value of the `aria-current` attribute, which indicates the element that represents the current item within a container or set of related elements.

**Note:** Setting aria attributes on `ElementInternals` allows default semantics to be defined on a custom element. These may be overwritten by author-defined attributes, but ensure that default semantics are retained should the author delete those attributes, or fail to add them at all. For more information see the Accessibility Object Model explainer.

Value
-----

A string with one of the following values:

`"page"`

Represents the current page within a set of pages.

`"step"`

Represents the current step within a process.

`"location"`

Represents the current location, for example the current page in a breadcrumbs hierarchy.

`"date"`

Represents the current date within a collection of dates.

`"time"`

Represents the current time within a set of times.

`"true"`

Represents the current item within a set.

`"false"`

Does not represent the current item within a set.

Examples
--------

In this example the value of `ariaCurrent` is set to "page".

```js
this.internals_.ariaCurrent = "page";
```

Specifications
--------------

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariacurrent |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using the aria-current attribute


ElementInternals: ariaSelected property - Web APIs

ElementInternals: ariaSelected property
=======================================

The **`ariaSelected`** property of the `ElementInternals` interface reflects the value of the `aria-selected` attribute, which indicates the current "selected" state of elements that have a selected state.

**Note:** Setting aria attributes on `ElementInternals` allows default semantics to be defined on a custom element. These may be overwritten by author-defined attributes, but ensure that default semantics are retained should the author delete those attributes, or fail to add them at all. For more information see the Accessibility Object Model explainer.

Value
-----

A string with one of the following values:

`"true"`

The item is selected.

`"false"`

The item is not selected.

`"undefined"`

The item is not

Examples
--------

In this example the value of `ariaSelected` is set to "true".

```js
this.internals_.ariaSelected = "true";
```

Specifications
--------------

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariaselected |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* ARIA: tab role


ElementInternals: ariaRelevant property - Web APIs

ElementInternals: ariaRelevant property
=======================================

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The **`ariaRelevant`** property of the `ElementInternals` interface reflects the value of the `aria-relevant` attribute, which indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified. This is used to describe what changes in an `aria-live` region are relevant and should be announced.

**Note:** Setting aria attributes on `ElementInternals` allows default semantics to be defined on a custom element. These may be overwritten by author-defined attributes, but ensure that default semantics are retained should the author delete those attributes, or fail to add them at all. For more information see the Accessibility Object Model explainer.

Value
-----

A string containing one or more of the following values, space separated:

"additions"

Additions of Element Nodes within the live region should be considered relevant.

"removals"

Deletion of Nodes from the live region should be considered relevant.

"text"

Changes to the textual content of existing nodes should be considered relevant.

"all"

Equivalent to `"additions removals text"`.

Examples
--------

In this example the value of `ariaRelevant` is set to "all".

```js
this.internals_.ariaRelevant = "all";
```

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


ElementInternals: states property - Web APIs

ElementInternals: states property
=================================

**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The **`states`** read-only property of the `ElementInternals` interface returns a `CustomStateSet` representing the possible states of the custom element.

Value
-----

A `CustomStateSet` which is a `Set` of strings.

Examples
--------

The following function adds and removes the state `--checked` to a `CustomStateSet`, then prints to the console `true` or `false` as the custom checkbox is checked or unchecked.

```js
set checked(flag) {
  if (flag) {
    this._internals.states.add('--checked');
  } else {
    this._internals.states.delete('--checked');
  }

  console.log(this._internals.states.has('--checked'));
}
```

Specifications
--------------

| Specification |
| --- |
| Custom State Pseudo Class # dom-elementinternals-states |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


ElementInternals: ariaDisabled property - Web APIs

ElementInternals: ariaDisabled property
=======================================

The **`ariaDisabled`** property of the `ElementInternals` interface reflects the value of the `aria-disabled` attribute, which indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.

**Note:** Setting aria attributes on `ElementInternals` allows default semantics to be defined on a custom element. These may be overwritten by author-defined attributes, but ensure that default semantics are retained should the author delete those attributes, or fail to add them at all. For more information see the Accessibility Object Model explainer.

Value
-----

A string with one of the following values:

`"true"`

The element and all focusable descendants are disabled, but perceivable, and their values cannot be changed by the user.

`"false"`

The element is enabled.

Examples
--------

In this example the value of `ariaDisabled` is set to "true".

```js
this.internals_.ariaDisabled = "true";
```

Specifications
--------------

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariadisabled |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


ElementInternals: setFormValue() method - Web APIs

ElementInternals: setFormValue() method
=======================================

The **`setFormValue()`** method of the `ElementInternals` interface sets the element's submission value and state, communicating these to the user agent.

Syntax
------

```js
setFormValue(value)
setFormValue(value, state)
```

### Parameters

`value`

A `File`, a string, or a `FormData` as the value to be submitted to the server.

`state` Optional

 A `File`, a string, or a `FormData` representing the input made by the user.
 This allows the application to re-display the information that the user submitted, in the form that they submitted it, if required.

**Note:** In general, `state` is used to pass information specified by a user, the `value` is suitable for submission to a server, post sanitization.
 For example, if a custom element asked a user to submit a date, the user might enter "3/15/2019".
 This would be the `state`.
 The server expects a date format of `2019-03-15`, the date in this format would be passed as the `value`.

### Return value

Undefined.

### Exceptions

`NotSupportedError` `DOMException`

Thrown if the element does not have its `formAssociated` property set to `true`.

Examples
--------

In the following example, a checkbox custom element sets `on` as the value to send to the server, and `checked` as the state.

```js
this.internals_.setFormValue("on", "checked");
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-elementinternals-setformvalue |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


ElementInternals: ariaKeyShortcuts property - Web APIs

ElementInternals: ariaKeyShortcuts property
===========================================

The **`ariaKeyShortcuts`** property of the `ElementInternals` interface reflects the value of the `aria-keyshortcuts` attribute, which indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.

**Note:** Setting aria attributes on `ElementInternals` allows default semantics to be defined on a custom element. These may be overwritten by author-defined attributes, but ensure that default semantics are retained should the author delete those attributes, or fail to add them at all. For more information see the Accessibility Object Model explainer.

Value
-----

A string.

Examples
--------

In this example the value of `ariaKeyShortcuts` is set to "Alt+Shift+A".

```js
this.internals_.ariaKeyShortcuts = "Alt+Shift+A";
```

Specifications
--------------

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariakeyshortcuts |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


ElementInternals: ariaOrientation property - Web APIs

ElementInternals: ariaOrientation property
==========================================

The **`ariaOrientation`** property of the `ElementInternals` interface reflects the value of the `aria-orientation` attribute, which indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.

**Note:** Setting aria attributes on `ElementInternals` allows default semantics to be defined on a custom element. These may be overwritten by author-defined attributes, but ensure that default semantics are retained should the author delete those attributes, or fail to add them at all. For more information see the Accessibility Object Model explainer.

Value
-----

A string with one of the following values:

`"horizontal"`

The element is horizontal.

`"vertical"`

The element is vertical.

`"undefined"`

The element's orientation is unknown.

Examples
--------

In this example the value of `ariaOrientation` is set to "vertical".

```js
this.internals_.ariaOrientation = "vertical";
```

Specifications
--------------

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariaorientation |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


ElementInternals: willValidate property - Web APIs

ElementInternals: willValidate property
=======================================

Baseline 2023
-------------

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

* Learn more
* See full compatibility
* Report feedback
The **`willValidate`** read-only property of the `ElementInternals` interface returns `true` if the element is a submittable element that is a candidate for constraint validation.

Elements that are barred from being candidates for constraint validation include those that have the attributes: `disabled`, `hidden` or `readonly`, input elements of `type=button` or `type=reset`, or any element that is a `<datalist>` element or has a `<datalist>` element ancestor.

Value
-----

`true` if the element is a candidate for constraint validation, otherwise `false`.

### Exceptions

`NotSupportedError` `DOMException`

Thrown if the element does not have its `formAssociated` property set to `true`.

Examples
--------

The following example shows a custom checkbox component with `formAssociated` set to `true`, the value of `willValidate` is logged to the console.

```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_.willValidate); // true
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-elementinternals-willvalidate |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


ElementInternals: role property - Web APIs

ElementInternals: role property
===============================

The **`role`** read-only property of the `ElementInternals` interface returns the WAI-ARIA role for the element. For example, a checkbox might have `role="checkbox"`.

Value
-----

A string which contains an ARIA role. A full list of ARIA roles can be found on the ARIA techniques page.

Examples
--------

Specifications
--------------

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-role |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


ElementInternals: setValidity() method - Web APIs

ElementInternals: setValidity() method
======================================

Baseline 2023
-------------

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

* Learn more
* See full compatibility
* Report feedback
The **`setValidity()`** method of the `ElementInternals` interface sets the validity of the element.

Syntax
------

```js
setValidity(flags)
setValidity(flags, message)
setValidity(flags, message, anchor)
```

### Parameters

`flags` Optional

A dictionary object containing one or more flags indicating the validity state of the element:

`valueMissing`

A boolean value that is `true` if the element has a `required` attribute, but no value, or `false` otherwise. If `true`, the element matches the `:invalid` CSS pseudo-class.

`typeMismatch`

A boolean value that is `true` if the value is not in the required syntax (when `type` is `email` or `url`), or `false` if the syntax is correct. If `true`, the element matches the `:invalid` CSS pseudo-class.

`patternMismatch`

A boolean value that is `true` if the value does not match the specified `pattern`, and `false` if it does match. If `true`, the element matches the `:invalid` CSS pseudo-class.

`tooLong`

A boolean value that is `true` if the value exceeds the specified `maxlength` for `HTMLInputElement` or `HTMLTextAreaElement` objects, or `false` if its length is less than or equal to the maximum length. If `true`, the element matches the `:invalid` and `:out-of-range` CSS pseudo-classes.

`tooShort`

A boolean value that is `true` if the value fails to meet the specified `minlength` for `HTMLInputElement` or `HTMLTextAreaElement` objects, or `false` if its length is greater than or equal to the minimum length. If `true`, the element matches the `:invalid` and `:out-of-range` CSS pseudo-classes.

`rangeUnderflow`

A boolean value that is `true` if the value is less than the minimum specified by the `min` attribute, or `false` if it is greater than or equal to the minimum. If `true`, the element matches the `:invalid` and `:out-of-range` CSS pseudo-classes.

`rangeOverflow`

A boolean value that is `true` if the value is greater than the maximum specified by the `max` attribute, or `false` if it is less than or equal to the maximum. If `true`, the element matches the `:invalid` and `:out-of-range` and CSS pseudo-classes.

`stepMismatch`

A boolean value that is `true` if the value does not fit the rules determined by the `step` attribute (that is, it's not evenly divisible by the step value), or `false` if it does fit the step rule. If `true`, the element matches the `:invalid` and `:out-of-range` CSS pseudo-classes.

`badInput`

A boolean value that is `true` if the user has provided input that the browser is unable to convert.

`customError`

A boolean value indicating whether the element's custom validity message has been set to a non-empty string by calling the element's `setCustomValidity()` method.

**Note:** To set all flags to `false`, indicating that this element passes all constraints validation, pass in an empty object `{}`. In this case, you do not need to also pass a `message`.

`message` Optional

A string containing a message, which will be set if any `flags` are `true`. This parameter is only optional if all `flags` are `false`.

`anchor` Optional

An `HTMLElement` which can be used by the user agent to report problems with this form submission.

### Return value

None (`undefined`).

### Exceptions

`NotSupportedError` `DOMException`

Thrown if the element does not have its `formAssociated` property set to `true`.

`TypeError`

Thrown if one or more `flags` is `true`.

`NotFoundError` `DOMException`

Thrown if `anchor` is given, but the anchor is not a shadow-including descendant of the element.

Examples
--------

In the following example `setValidity` is called with an empty `flags` parameter to indicate that the element meets constraint validation rules.

```js
this.internals_.setValidity({});
```

In the following example `setValidity` is called with the flag `valueMissing` set to `true`. A `message` parameter must then also be passed containing a message.

```js
this.internals_.setValidity({ valueMissing: true }, "my message");
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-elementinternals-setvalidity |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


ElementInternals: ariaRowCount property - Web APIs

ElementInternals: ariaRowCount property
=======================================

The **`ariaRowCount`** property of the `ElementInternals` interface reflects the value of the `aria-rowcount` attribute, which defines the total number of rows in a table, grid, or treegrid.

**Note:** Setting aria attributes on `ElementInternals` allows default semantics to be defined on a custom element. These may be overwritten by author-defined attributes, but ensure that default semantics are retained should the author delete those attributes, or fail to add them at all. For more information see the Accessibility Object Model explainer.

Value
-----

A string which contains an integer.

Examples
--------

In this example the value of `ariaRowCount` is set to "100".

```js
this.internals_.ariaRowCount = "100";
```

Specifications
--------------

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariarowcount |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

* ARIA: table role


ElementInternals: ariaColSpan property - Web APIs

ElementInternals: ariaColSpan property
======================================

The **`ariaColSpan`** property of the `ElementInternals` interface reflects the value of the `aria-colspan` attribute, which defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.

**Note:** Setting aria attributes on `ElementInternals` allows default semantics to be defined on a custom element. These may be overwritten by author-defined attributes, but ensure that default semantics are retained should the author delete those attributes, or fail to add them at all. For more information see the Accessibility Object Model explainer.

Value
-----

A string which contains an integer.

Examples
--------

In this example the value of `ariaColspan` is set to "2".

```js
this.internals_.ariaColspan = "2";
```

Specifications
--------------

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariacolspan |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* ARIA: table role


ElementInternals: ariaLevel property - Web APIs

ElementInternals: ariaLevel property
====================================

The **`ariaLevel`** property of the `ElementInternals` interface reflects the value of the `aria-level` attribute, which defines the hierarchical level of an element within a structure.

**Note:** Setting aria attributes on `ElementInternals` allows default semantics to be defined on a custom element. These may be overwritten by author-defined attributes, but ensure that default semantics are retained should the author delete those attributes, or fail to add them at all. For more information see the Accessibility Object Model explainer.

Value
-----

A string containing an integer.

Examples
--------

In this example the value of `ariaLevel` is set to "1".

```js
this.internals_.ariaLevel = "1";
```

Specifications
--------------

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-arialevel |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* ARIA: heading role


ElementInternals: ariaReadOnly property - Web APIs

ElementInternals: ariaReadOnly property
=======================================

The **`ariaReadOnly`** property of the `ElementInternals` interface reflects the value of the `aria-readonly` attribute, which indicates that the element is not editable, but is otherwise operable.

**Note:** Setting aria attributes on `ElementInternals` allows default semantics to be defined on a custom element. These may be overwritten by author-defined attributes, but ensure that default semantics are retained should the author delete those attributes, or fail to add them at all. For more information see the Accessibility Object Model explainer.

Value
-----

A string with one of the following values:

`"true"`

The user cannot change the value of the element.

`"false"`

The user can set the value of the element.

Examples
--------

In this example the value of `ariaReadOnly` is set to "true".

```js
this.internals_.ariaReadonly = "true";
```

Specifications
--------------

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariareadonly |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* ARIA: textbox role


ElementInternals: ariaValueMax property - Web APIs

ElementInternals: ariaValueMax property
=======================================

The **`ariaValueMax`** property of the `ElementInternals` interface reflects the value of the `aria-valuemax` attribute, which defines the maximum allowed value for a range widget.

**Note:** Setting aria attributes on `ElementInternals` allows default semantics to be defined on a custom element. These may be overwritten by author-defined attributes, but ensure that default semantics are retained should the author delete those attributes, or fail to add them at all. For more information see the Accessibility Object Model explainer.

Value
-----

A string which contains a number.

Examples
--------

In this example the value of `ariaValueMax` is set to "20".

```js
this.internals_.ariaValueMax = "20";
```

Specifications
--------------

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariavaluemax |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


ElementInternals: ariaValueMin property - Web APIs

ElementInternals: ariaValueMin property
=======================================

The **`ariaValueMin`** property of the `ElementInternals` interface reflects the value of the `aria-valuemin` attribute, which defines the minimum allowed value for a range widget.

**Note:** Setting aria attributes on `ElementInternals` allows default semantics to be defined on a custom element. These may be overwritten by author-defined attributes, but ensure that default semantics are retained should the author delete those attributes, or fail to add them at all. For more information see the Accessibility Object Model explainer.

Value
-----

A string which contains a number.

Examples
--------

In this example the value of `ariaValueMin` is set to "10".

```js
this.internals_.ariaValueMin = "10";
```

Specifications
--------------

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariavaluemin |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


ElementInternals: labels property - Web APIs

ElementInternals: labels property
=================================

The **`labels`** read-only property of the `ElementInternals` interface returns the labels associated with the element.

Value
-----

A `NodeList` containing all of the label elements associated with this element.

Examples
--------

 The following example shows a custom checkbox component with a `<label>` element linked to it.
 Printing the value of `labels` to the console returns a `NodeList` with one entry, representing this label.

```html
<form id="myForm">
  <custom-checkbox id="custom-checkbox"></custom-checkbox>
  <label for="custom-checkbox">Join newsletter</label>
</form>
```

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

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-elementinternals-labels |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


ElementInternals: ariaDescription property - Web APIs

ElementInternals: ariaDescription property
==========================================

The **`ariaDescription`** property of the `ElementInternals` interface reflects the value of the `aria-description` attribute, which defines a string value that describes or annotates the current element.

**Note:** Setting aria attributes on `ElementInternals` allows default semantics to be defined on a custom element. These may be overwritten by author-defined attributes, but ensure that default semantics are retained should the author delete those attributes, or fail to add them at all. For more information see the Accessibility Object Model explainer.

Value
-----

A string.

Examples
--------

In this example the value of `ariaDescription` is set to "A description of this widget".

```js
this.internals_.ariaDescription = "A description of this widget";
```

Specifications
--------------

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariadescription |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


ElementInternals: validationMessage property - Web APIs

ElementInternals: validationMessage property
============================================

Baseline 2023
-------------

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

* Learn more
* See full compatibility
* Report feedback
The **`validationMessage`** read-only property of the `ElementInternals` interface returns the validation message for the element.

Value
-----

A string containing the validation message of this element.

Examples
--------

In the following example the validation message is set with `ElementInternals.setValidity()`, and then returned with `validationMessage`.

```js
this.internals_.setValidity({ valueMissing: true }, "my message");
console.log(this.internals_.validationMessage); // "my message"
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-elementinternals-validationmessage |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


ElementInternals: ariaValueNow property - Web APIs

ElementInternals: ariaValueNow property
=======================================

The **`ariaValueNow`** property of the `ElementInternals` interface reflects the value of the `aria-valuenow` attribute, which defines the current value for a range widget.

**Note:** Setting aria attributes on `ElementInternals` allows default semantics to be defined on a custom element. These may be overwritten by author-defined attributes, but ensure that default semantics are retained should the author delete those attributes, or fail to add them at all. For more information see the Accessibility Object Model explainer.

Value
-----

A string which contains a number.

Examples
--------

In this example the value of `ariaValueNow` is set to "1".

```js
this.internals_.ariaValueNow = "1";
```

Specifications
--------------

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariavaluenow |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


ElementInternals: ariaExpanded property - Web APIs

ElementInternals: ariaExpanded property
=======================================

The **`ariaExpanded`** property of the `ElementInternals` interface reflects the value of the `aria-expanded` attribute, which indicates whether a grouping element owned or controlled by this element is expanded or collapsed.

**Note:** Setting aria attributes on `ElementInternals` allows default semantics to be defined on a custom element. These may be overwritten by author-defined attributes, but ensure that default semantics are retained should the author delete those attributes, or fail to add them at all. For more information see the Accessibility Object Model explainer.

Value
-----

A string with one of the following values:

`"true"`

The grouping element this element owns or controls is expanded.

`"false"`

The grouping element this element owns or controls is collapsed.

`"undefined"`

The element does not own or control a grouping element that is expandable.

Examples
--------

In this example the value of `ariaExpanded` is set to "true".

```js
this.internals_.ariaExpanded = "true";
```

Specifications
--------------

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariaexpanded |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.