Element

An element with no parameters is a plain div: it carries the bit-elm class, an automatically generated id and whatever content is put inside it. That is the whole of the component with nothing configured, and every other example only changes which tag that content ends up in.

Element names the tag to render, and the value is used exactly as written, since SVG tag names such as linearGradient are case sensitive. What is accepted is a name a tag can be made of: an ASCII letter, followed by letters, digits and the -, _, . and : that join them in every markup language that has tag names. Anything else falls back to the default div rather than reaching the markup - a whitespace or a < would end the tag and write markup of its own, and the remaining symbols are names the browsers do not agree to build an element of, so one of them would throw where the element is created. Changing the tag between renders replaces the rendered element with a new one.

The tag does not have to be an HTML one. An SVG shape works because the browser reads the namespace from the svg the element is rendered into, and the case of the tag name is kept, which is what linearGradient, clipPath and feGaussianBlur need. A custom element - any name with a dash in it - is passed through untouched, so a web component is reachable from Razor with the same parameters as everything else.

HTML defines a handful of void elements - area, base, br, col, embed, hr, img, input, link, meta, param, source, track and wbr, plus the obsolete basefont, bgsound, frame and keygen the HTML parser still treats as such - which hold no content at all. The component knows them, so it renders them without a closing tag and leaves the ChildContent out rather than emitting markup a browser would have to repair.

Anything that is not a parameter of the component is splatted onto the rendered tag, which is what makes the element useful in the first place: href and target on an anchor, placeholder on an input, a data-* attribute anywhere, and the Blazor event handlers (@onclick, @oninput, ...) that go with them. Nothing about them is tag-specific, so the same markup keeps working when the tag changes.

Razor only accepts the @onclick:stopPropagation and @onclick:preventDefault directives on a plain HTML element, never on a component, so the element offers them as parameters instead. StopPropagation keeps a click inside a clickable container from also reaching that container, and PreventDefault cancels the browser's own action - the navigation of an anchor, the submit of a button - while the click handler still runs. StopPropagationEvents and PreventDefaultEvents are the same two modifiers for every other event, named with or without the on prefix: the contextmenu a custom menu replaces, the dragover of a drop target, the submit of a form, a keydown the page handles itself. A name in either list is a modifier of the element rather than a handler of the event, so it applies whether or not a handler of that event is written beside it - and naming the click in a list is allowed too, where it has the last word over the parameter of the same name beside it.

IsEnabled set to false dims the element and takes it out of hit testing through the bit-dis class, so the state means the same thing whichever tag is rendered. On top of that it writes the disabled attribute only on the elements HTML defines one on (button, fieldset, input, optgroup, option, select and textarea), and on every other tag a tabindex of -1 instead, so that a tag the browser will not disable of itself is at least out of the keyboard's reach as well as the pointer's. aria-disabled goes on all of them, so assistive technologies announce the element as disabled rather than as missing. A disabled hyperlink - an a or an image map's area - also loses its href, since a link is focusable and followed by the enter key whatever the tab order says. The state describes the element itself: content inside it keeps its own tab stops.

Visibility hides the element in the two ways CSS offers: Hidden keeps the space it occupies and Collapsed takes the element out of the layout altogether. Collapsed is the one state that still means something without an element to carry it, so it applies to an unwrapped element too - there it renders nothing at all, not even the content.

NoWrapper renders the content and nothing else, which is the conditional wrapper: the same markup either wraps its content in a tag or leaves it untouched, without writing the content twice in the two branches of an if. Since no element is rendered, everything that describes one - the tag, the class, the style, the id, the direction, the splatted attributes and the captured element reference - has nowhere to land and is ignored.

The tag is an ordinary parameter, so it can come from a variable and change while the page is running. The attributes below are splatted onto whichever tag is picked and only the ones that tag understands have any effect - href on the anchor, placeholder on the input and the textarea - which is what lets one piece of markup serve every one of them.

An @ref on the component reaches the rendered element: FocusAsync gives it the browser focus, and RootElement is the ElementReference to hand to JavaScript interop. The element has to be one the browser can focus - a tag that is focusable of itself, or any other tag carrying a TabIndex, which is what puts the div below into the tab order. The overload of FocusAsync taking a preventScroll flag focuses without the browser scrolling the document to bring the element into view. Both are about an element that is there, so while NoWrapper is set, or before the first render, the call does nothing rather than fail.

Style and Class apply to the rendered element like they do on every other component of the library. They are merged with a style or a class written as a plain HTML attribute rather than replacing it, so an element can take a class from a parameter and another one from splatted attributes at the same time and keep both.

Dir sets the text direction of the rendered element, writing the dir attribute and, for right-to-left, the bit-rtl class the rest of the library reads. It applies to whichever tag is rendered and cascades to everything inside it.