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 HTMLButton prop to Button such as type. 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 the page body.
Components support named snippets to fill in or replace content and the children snippet
for default content..
Some props support either a string or a snippet. For example, Label's text props. If
a string is passed, it is rendered as the label, otherwise the {@render text()} snippet is called.
Components also provide default content when a snippet prop is undefined. For
example, TreeItem will render the expand/collapse chevron when the icon snippet is specified.
In a components like List or Tree, it would be a burden to require callers to pass properties down
the hierarchy of components. 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.
Some component use context. To support context values bound to props or $state, the
context objects are implemented using getters and setters.
For example, Tree sets a TreeContext context that tells TreeItem if the tree is disabled, the expanded node values, and the selected value. TreeItem sets a TreeItemContext that tells TreeItem children, if the item is disabled
and the depth of the children.
Components sometimes need to locate elements they didn't render. They do this with ParentNode.querySelector and find elements by role and data properties.
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 to allow a theme to effectively apply styles.
sterling-component class is added to each root element. For example,
Button renders <button class="sterling-button">.off-label, toggle, thumb, and on-label classes to the different child elements.selected class whenever it
is selected.data-value= to the
value.