Glossary - HelixDesignSystem/helix-ui GitHub Wiki

• Anchor
• Autonomous Custom Element
• Customized Built-in Element
• Custom Element Registry
• Disabled
• Field
• FOUC
• Inert
• Interactive State
• Link
• Persistent State
• Upgrade
• User Agent

An anchor (<a>) can be used to define an anchor point in an HTML document.

• Without the href attribute, an anchor behaves like a normal inline element.
• An anchor is not added to the tab focus order.

This is likely what folks are referring to when they say "custom element". Autonomous custom elements implement behavior "from scratch".

This type of custom element is similar to:

• React Components
• VueJS Components
• AngularJS Element Directives

Example

<my-stuff></my-stuff>
<x-foobar></x-foobar>

These elements extend functionality of native elements, like <button>.

(2020-01-29; https://caniuse.com/#feat=custom-elementsv1)

Example

<button is="fancy-button">Fancy Button</button>

For an element to be upgraded, the browser needs to know how it should be styled and behave. This is done with the custom element registry, by providing the name of the custom element along with its behavior definition.

class MyElement extends HTMLElement {
  /* ... */
}

customElements.define('my-element', MyElement);

Similar to inert elements, disabled elements prevent interactive states. However, disabled elements also prevent background functionality.

A grouping for a single piece of data (e.g., "name", "street address", "cc number", etc.) and is composed of the following:

• Name - (0..*) Optional text used to identify the data being collected in the Field.
  • If a Name is not displayed, a visually hidden label should be defined to support accessible user agents.
• Prefix - (0..*) Optional inline content appearing before the Control.
• Control - (1) Interactive element used to assign a value to a Field.
• Suffix - (0..*) Optional inline content appearing after the Control.
• Help Text - (0..*) Optional, supplemental text used to describe the data or its expected value.
• Error Text - (0..*) Optional, supplemental text used to communicate invalid user input.

"Flash of Unstyled Content" - Before custom elements are upgraded, they have very basic styles applied to them (typically styled as inline elements with no frills). After upgrade, an element's style is fully defined and all should be well. Before upgrading, the browser displays a flash of unstyled content.

Inert elements prevent interactive states (i.e., can't be focused, clicked, etc.), but background functionality may still continue to run (e.g., listening for events, polling an API for data, etc.).

Inert elements are commonly associated with modal dialogs, because elements in the background should be made inert, per WAI-ARIA guidelines.

NOTE: Interactive states may be applied in addition to persistent states.

Interactive states require user interaction and are styled using pseudo classes.

(a.k.a. "Hyperlink") A link is an anchor with an href attribute (<a href="..."></a>). A link is automatically added to the tab focus order by browsers.

Persistent states exist without user interaction. These states typically are configured through HTML attributes. Sometimes it makes sense to apply an associated JavaScript property to the element, as well.

* [disabled] should only be used for custom elements, otherwise use :disabled.

** :checked only matches for natively selectable HTML widgets (i.e., <option checked>, <input type="checkbox" checked>, <input type="radio" checked>, etc.)

Browsers treat any unknown tags as a generic "unknown" element. Once the custom element registry is made aware that the element is a custom element, it will be upgraded to its custom behavior and appearance.

A User Agent (UA) is software that acts on behalf of the user, such as a web browser or screen reader.