Components / Library version 3.26.0

Wrapper

The wrapper component renders all elements within it and emits an event when it has loaded. It does not use the shadow DOM. The component library features lazy loading, but when you want to avoid the appearance of lagtime in components loading in relation to other elements, use the wrapper component. It will not load until all child elements have loaded, allowing you to render all content at once.

Properties Examples Events Accessibility

None.

Usage in HTML

Edit the code below to see changes reflected in the example above.

Usage in Elm

Code generated from HTML.
wmWrapperLoaded
Emitted when the component has finished loading. All content within the component will have already loaded and will render at this point.

The wrapper component will not affect the accessibility of elements rendered within it.

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.