Components will forward props to either the associated intrinsic HTML element or the root element rendered.
For example, the Button component renders a <button/>. The Button component forwards HTMLButtonElement props to the button element.
This means you can pass any HTMLButtonProp to Button. If you specified type=submit this would override the Button components default type=button prop.
Svelte provide onevent callbacks for HTML element events. These callbacks do not change the casing of the HTML event name. For example, the button click event is handled via the onclick callback.
In sterling-svelte, any custom callbacks are camel cased onEvent. For example, the callback for a tree item select events is
onSelect?: (selectedValue: string | undefined) => void;
Components with floating UI like Dropdown, Menu, and Select need to ensure that the dropdown UI is not hidden due to a container's overflow setting. Components use portaling to render a part of their UI as the last child of <body>.
Components support named snippets to fill in or replace content. The children snippet is used for default content.
Some props support either string or Snippet. For example, Label's text prop. If a string is
passed, it is rendered as the label; otherwise {@render text()} is called.
Components also provide default content when a snippet prop is undefined. For example, TreeItem will render the expand/collapse chevron.
In a components like List or Tree, it would be a burden to require callers to pass properties down the hierarchy of components (aka prop drilling). For example, passing Tree's expandedValues property to every TreeItem would be tedious. Svelte's context is used to pass contextual data down the hierarchy.
For example, Tree sets a TreeContext context that let TreeItem know if the Tree is disabled, the expanded node values, and the selected value. TreeItem sets a TreeItemContext that tells TreeItem children, if the parent is disabled and the depth of the parent.
Components sometimes need to locate elements they didn't render. They do this with querySelector and find elements by class, role or data attributes.
For example, TreeItem finds previous and next siblings to implement up/down arrow key handling.
It uses calls like querySelector('[role="treeitem"][data-value]') to locate the next
sibling.
Each sterling-svelte component renders HTML elements with classes and data attributes to allow theming and styling.
<button class="sterling-button">.