Glossary

• Autonomous Custom Element
• Customized Built-in Element
• Interactive State
• Persistent State

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
• Angular 1.x Element Directives

Example

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

Customized Built-in Element

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

NOTE: There is currently no support for these types of custom elements in ANY browser.

Example

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

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.

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}