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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.