Skip to content

Glossary

Jump to bottom
Ryan Johnson edited this page Jan 29, 2020 · 17 revisions
Audience
Mixed

Anchor

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.

Autonomous Custom Element

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>

Customized Built-in Element

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

IE Edge (Legacy) Edge Chrome Firefox Safari
❌ ❌ ✅ ✅ ✅ ❌

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

Example

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

Custom Element Registry

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);

Disabled

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

Field

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 captured in the Field.
  • Prefix - (0..*) Optional inline content appearing before all Controls.
  • Control - (1..*) Interactive element used to assign a whole or partial value to a Field.
  • Infix - (0..*) Optional inline content appearaing between Controls of a Field.
  • Suffix - (0..*) Optional inline content appearaing after all Controls within a Field.
  • 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.

FOUC

"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

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.

Interactive State

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

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

State Selector Events
Blurred n/a blur
Focused :focus focus
Hovered :hover mouseover, etc.
Pressed :active mousedown, keydown, touchstart, etc.

Link

(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 State

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.

State Attribute Property
Default n/a n/a
Disabled <hx-foo disabled> elFoo.disabled = {Boolean}
Indeterminate <hx-foo indeterminate> elFoo.indeterminate = {Boolean}
Invalid <hx-foo invalid> elFoo.invalid = {Boolean}
Selected <hx-foo checked> elFoo.checked = {Boolean}

Upgrade

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.

Clone this wiki locally