This section is organized into several areas:
Elements: web components which you can use directly in your web projects, or as starting points for your own components. These elements do their best to meet Gold Standard checklist for Web Components, a rigorous standard for ensuring a high level of component quality.
Mixins: aspects of component behavior that can be combined to create functional web components that meet the Gold Standard.
Helpers: low-level functions used by the above, and also avaible for cases where you need to build your own solution.
Elix render pipeline
Elix components use a functional-reactive programming (FRP) architecture. To achieve high quality, reliable behaviors across a large number of components, the project breaks down component behaviors in mixins. These mixins cooperate with each other, generally handling a specific point in a rendering pipeline:
events → methods → state → updates → DOM
- User activity generates DOM events, such as a
touchstartevent. User activity can also trigger application behavior that produces custom element lifecycle callbacks (e.g.,
attributeChangedCallback). These can also be considered events in this pipeline.
- Event handlers respond by invoking methods or setting properties on the component. (In very simple cases, an event handler skip this step, and directly call
setStateto update component state.)
- Component methods/properties in turn update component state. The method/property may call
setStatedirectly, or it might invoke another method/property that ultimately calls
- The component is asked for updates it would like to apply to the DOM.
- Updates render changes to the DOM. Alternatively, the component can implement an internal
rendermethod that updates the DOM directly.
In rare cases, a component may need to do additional work after updates have been been rendered to the DOM.
Core mixins that define the pipeline
The pipeline described above is defined by a core set of component mixins:
- ReactiveMixin. Manages a component's
stateproperty, and renders the compnent when state changes.
- RenderUpdatesMixin. Helps a component map
stateto a set of
updatesthat should be applied to DOM attributes, classes, styles, and properties.
- ShadowTemplateMixin. Creates a component's shadow root and stamps a template into it.
For convenience, this set of core mixins is provided in a single base class called ElementBase. (ElementBase also includes
AttributeMarshallingMixin, below.) When creating your own components, you don't have to use that base class; you can use the mixins above directly.
The remaining Elix mixins generally focus on the transition from one of these steps in the pipeline to the next.
Mixins that handle events (events → methods)
Some of these mixins directly update state.
- ArrowDirectionMixin. Adds left/right buttons that map to
- AttributeMarshallingMixin. Maps attributes to properties.
- ClickSelectionMixin. Maps clicks on items to setting
- FocusVisibleMixin. Tracks whether to show a focus ring indicator, sets
- HoverMixin. Maps
- KeyboardMixin. Maps
- PageDotsMixin. Adds page dot buttons that map to setting
- PopupModalityMixin. Maps
blurand various window/document events to
- SlotContentMixin. When the component's slot receives a
slotchangeevent, this updates
state.contentwith the new nodes assigned to the slot.
- TouchSwipeMixin. Maps touch swipe gestures to
- TrackpadSwipeMixin. Maps trackpad gestures to
- TransitionEffectMixin. Manages state changes that depend upon completion of CSS transitions.
Mixins that map methods to other methods
These mixins generally map from a low-level abstraction (e.g., a specific type of key has been pressed) to a higher-level abstraction (something should be selected).
- DialogModalityMixin. Maps Esc key to
closemethod. (This mixin also has effects following the render phase.)
- DirectionSelectionMixin. Maps methods like
- FocusCaptureMixin. Wraps the keyboard focus within a component such as a dialog.
- KeyboardDirectionMixin. Maps keypresses like Left and Right arrow keys to
- KeyboardPagedSelectionMixin. Maps Page Up and Page Down keys to changes to
- KeyboardPrefixSelectionMixin. Maps prefix typing to changes to
- PopupModalityMixin. Maps Esc key to
- SwipeDirectionMixin. Maps
Mixins that update state (methods → state)
- OpenCloseMixin. Tracks the opened/closed state, providing open/close methods that set a
- SelectedItemTextValueMixin. Supplies a
valueproperty that gets/sets the item specified by a
- SingleSelectionMixin. Maps selection methods like
selectNextto changes in
Mixin that render state (state → render)
- AriaListMixin. Renders
state.selectedIndexas various ARIA attributes like
- ArrowDirectionMixin. Renders left/right arrow buttons.
- ContentItemsMixin. Defines an
itemsproperty based on
state.content, filtering out auxiliary invisible elements. During rendering, the component is given a chance to indicate what updates should be assigned to each specific item in
- DialogModalityMixin. Renders a default ARIA role.
- OverlayMixin. Renders an open state as changes to
z-indexto make an element appear on top.
- PageDotsMixin. Renders a set of dots corresponding to items in a carousel.
Mixins that perform work after render
In rare cases, a mixin may need to perform work after a component has been rendered in the DOM.
- DialogModalityMixin. Disables document scrolling while an overlay open.
- LanguageDirectionMixin. If component is in the content of a right-to-left language, this sets
- SelectionInViewMixin. When
state.selectedIndexchanges, ensure that the selected item is scrolled into view.
More information and background about the Elix project can be found at the following: