Foundation

Spacing

We use 4px as the baseline of our spacing system. This unit serves as the foundation for spacing and sizing elements on a page with the units of measurement increasing by multiples of 4.

The progression of the 4px spacing system.

Fixed Spacing

To maintain consistency, select page elements (that have predictable placement and content) have fixed, pre-defined spacing. This spacing is included for symbols in the UI Library in Abstract.

An example of fixed, pre-defined spacing for text inside a page header that includes a page title and description.
An example of fixed spacing for a table.
An example of fixed spacing for the header, footer, and margins of a modal. The elements in the content area of the modal may use any multiple of 4 for spacing as applicable.

Flexible Spacing

Since content inside a container (such as a modal, card, or dialog) is variable depending on the context, spacing between elements inside these content areas is flexible as long as it is a multiple of 4.

For more references for spacing of commonly used patterns and layouts, view the spacing collection in Abstract .

In a compound component like Select or Action Menu, child components are rendered in the parent's slot element, part of its shadow DOM tree. Slots essentially serve as a placeholder for markup that you the developer define in the light DOM tree, like <wm-menuitem>, <wm-option>, text content, or other child elements.

The browser distributes the child elements defined in the light DOM into the shadow DOM of the parent. The result is a flattened DOM tree—a merger of the the light DOM and the shadow DOM. This flattened tree is what you see in DevTools and what is rendered on the page.

With the standard implementation of the component, dynamically updating the child items will throw an error. Elm's efficient diffing of the DOM will register that only the child items have changed and try to update them, but the component has already been composed.

Rendering the component in a Keyed node and giving it a dynamic id will cause the entire component, rather than just the child items, to render anew, avoiding the error.