recursal/MDN huggingface dataset:
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
=======================================

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
=====================================

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
======================================

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
=======================================

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
=======================================

**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
=================================

**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
=======================================

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
=======================================

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
===========================================

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
==========================================

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
=======================================

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
===============================

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: 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
======================================

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
====================================

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
=======================================

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
=======================================

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
=======================================

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.