`internals`

The element's ElementInternals, attached by REALM.

internals: ElementInternals

internals.states.add("expanded");
internals.ariaExpanded = "true";
internals.setFormValue(props.value);

What it is used for

Member	Use
`states`	Custom states for CSS: `internals.states.add("open")` matches `:host(:state(open))` and `tag:state(open)`
`role`, `aria*`	Default ARIA role and properties. The definition's `role` attribute sets `internals.role`
`setFormValue(value)`	The value submitted with the form (form-associated components)
`setValidity(flags, message, anchor)`	Validation state
`form`, `labels`, `validity`, `validationMessage`, `willValidate`, `checkValidity()`, `reportValidity()`	Form association

REALM uses internals.states for the reactive :state() selectors and :state(loading). In form-associated components with a value prop, REALM calls setFormValue for you, and with ref="control" it calls setValidity.

Example

Preview

index.html

expand-box.html

Toggle details

Details shown through a custom state.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>internals demo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/dist/theme.css">
  <script type="module" src="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.js"></script>
</head>
<body>
  <import-element from="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/components/button.html"></import-element>

  <import-element from="./expand-box.html"></import-element>

  <expand-box></expand-box>
</body>
</html>

<custom-element name="expand-box">
  <script>
    function toggle() {
      if (internals.states.has("expanded")) internals.states.delete("expanded");
      else internals.states.add("expanded");
    }
  </script>

  <style>
    :host {
      display: block;
      max-width: calc(var(--spacing) * 100);
    }
    p {
      display: none;
    }
    :host(:state(expanded)) p {
      display: block;
    }
  </style>

  <ui-button variant="outline" onclick="toggle()">Toggle details</ui-button>
  <p>Details shown through a custom state.</p>
</custom-element>

Edit this page on GitHub · View as Markdown

internals

What it is used for

Example

Related

`internals`