# Element
**Also known as:** DynamicElement, Slot
## Description
BitElement renders any tag - a div by default, or an anchor, a button, an input, an SVG shape, a custom element - with the parameters every bit BlazorUI component takes. Other attributes and events are splatted onto the tag, disabling follows what the tag supports, NoWrapper makes it a conditional wrapper, and the stopPropagation / preventDefault modifiers Razor only allows on plain elements are parameters.
## Parameters
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| ChildContent | `RenderFragment?` | null | The content of the element. Not rendered into a void element (input, img, br, hr, ...). |
| Element | `string?` | null | The tag to render, used as written (SVG and custom elements included). A value that is not a valid tag name - an ASCII letter followed by letters, digits, "-", "_", "." or ":" - falls back to the default "div". |
| NoWrapper | `bool` | false | Renders only the content, without the tag. Everything describing the tag is ignored, except a Collapsed Visibility, which drops the content too. |
| PreventDefault | `bool` | false | Prevents the default browser action of the click (@onclick:preventDefault). |
| PreventDefaultEvents | `IEnumerable<string>?` | null | The events whose default browser action is prevented, named with or without the "on" prefix. Naming "click" wins over PreventDefault. |
| StopPropagation | `bool` | false | Stops the click from bubbling up to the ancestors (@onclick:stopPropagation). |
| StopPropagationEvents | `IEnumerable<string>?` | null | The events stopped from bubbling up, named with or without the "on" prefix. Naming "click" wins over StopPropagation. |
| AriaLabel | `string?` | null | Gets or sets the accessible label for the component, used by assistive technologies. |
| Class | `string?` | null | Gets or sets the CSS class name(s) to apply to the rendered element. |
| Dir | `BitDir?` | null | Gets or sets the text directionality for the component's content. |
| Disabled | `bool` | false | Gets or sets a value indicating whether the component is disabled and cannot respond to user interaction. |
| ForceAnimation | `bool` | false | Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested. |
| HtmlAttributes | `Dictionary<string, object>` | new Dictionary<string, object>() | Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. An attribute written on the component wins over an entry of the same name. |
| Id | `string?` | null | Gets or sets the unique identifier for the component's root element. |
| Style | `string?` | null | Gets or sets the CSS style string to apply to the rendered element. |
| TabIndex | `string?` | null | Gets or sets the tab order index for the component when navigating with the keyboard. |
| Visibility | `BitVisibility` | BitVisibility.Visible | Gets or sets the visibility state (visible, hidden, or collapsed) of the component. |
## Public Members
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| FocusAsync | `ValueTask` | | Focuses the rendered element; the overload taking preventScroll focuses it without scrolling it into view. The element must be focusable (a focusable tag or one with a TabIndex). Does nothing while NoWrapper is set or before the first render. |
| UniqueId | `Guid` | Guid.NewGuid() | Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed. |
| RootElement | `ElementReference` | | Gets the reference to the root HTML element associated with this component. |
## Enums
### BitVisibility Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Visible | 0 | The content of the component is visible. |
| Hidden | 1 | The content of the component is hidden, but the space it takes on the page remains (visibility:hidden). |
| Collapsed | 2 | The component is hidden (display:none). |
### BitDir Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Ltr | 0 | Ltr (left to right) is to be used for languages that are written from the left to the right (like English). |
| Rtl | 1 | Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic). |
| Auto | 2 | Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element. |
## CSS Variables
Public CSS custom properties read off the component's root. Set one on `:root` to restyle every instance, on any ancestor to restyle the ones inside it, or on the `Style` of one instance to restyle it and every instance nested inside it, which inherits the value too - a parameter changes one alone, as does the real CSS property on its `Style` / `Styles` when that property does not inherit (`opacity`); an inherited one (`color`, `font-family`) reaches the nested instances that do not set it themselves.
| Name | Default Value | Description |
| :--- | :------------ | :---------- |
| `--bit-Element-disabled-opacity` | --bit-opa-dis | Opacity of a disabled element. Set it to 1 to keep the tag's own look, for a wrapper whose content shows its own disabled state. It inherits, so the value also reaches every element inside: a disabled element nested in a wrapper set to 1 is not dimmed either. To keep one wrapper alone at full opacity, set opacity: 1 on its Style instead, which is not inherited. |
## Examples
\n**Basic**:
```razor
The default element (div)
A heading (h4)
A paragraph (p) with a highlighted (mark) word.
A quotation (blockquote)
An invalid tag name falls back to a div.
```
\n**Attributes & events**:
```razor
An anchor to bitplatform.dev
Clicked @counter times
You typed: @typed
```
```csharp
private int counter;
private string? typed;
```
\n**SVG & custom elements**:
```razor
A custom element (demo-badge)
```
\n**Void elements**:
```razor
Not rendered: a br holds no content.
```
\n**Event modifiers**:
```razor
An anchor that does not navigate (@prevented)
@element
```
```csharp
private string element = "div";
private readonly List> elementsList =
[
new() { Text = "div", Value = "div" },
new() { Text = "a", Value = "a" },
new() { Text = "input", Value = "input" },
new() { Text = "button", Value = "button" },
new() { Text = "textarea", Value = "textarea" },
new() { Text = "progress", Value = "progress" }
];
```
\n**No wrapper**:
```razor
The same content, highlighted or bare.
```
```csharp
private bool wrapped = true;
```
\n**Element reference**:
```razor
A div, focusable because it has a TabIndex.
Focus the input
Focus the div without scrolling
```
```csharp
private BitElement? boxElement;
private BitElement? inputElement;
private async Task FocusTheInput()
{
if (inputElement is null) return;
await inputElement.FocusAsync();
}
private async Task FocusTheBox()
{
if (boxElement is null) return;
await boxElement.FocusAsync(preventScroll: true);
}
```
\n**Disabled**:
```razor
A disabled button
A disabled anchor
A disabled div button, out of the tab order (@disabledClicks)
```
```csharp
private int disabledClicks;
```
\n**Visibility**:
```razor
Hidden keeps its space.
Collapsed takes its space with it.
Unwrapped content is dropped while collapsed.
```
```csharp
private bool isVisible = true;
```
\n**Cascading parameters**:
```razor
Outside the cascade: a plain div again.
```
```csharp
private int toolbar;
private int toolbarCard;
private readonly BitElementParams[] elementParams =
[
new()
{
Element = "button",
StopPropagation = true,
}
];
```
\n**Style & Class**:
```razor
Styled through the Style parameter
Classed through the Class parameter
A Class parameter and a plain style attribute
Disabled, dimmed further
A disabled fieldset, not dimmed
A disabled fieldset, not dimmed on its own
A disabled div inside it, still dimmed
```
\n**RTL**:
```razor
این یک المنت راستچین است.
یک نقل قول راستچین.
```
The card was clicked @card times.
Stops propagation (@inner)
Bubbles up (@inner)
The card was double-clicked @doubled times.
Double-click stays here, right-click opens no browser menu (@inner)
```
```csharp
private int card;
private int inner;
private int doubled;
private int prevented;
```
\n**Dynamic element**:
```razor
The card was clicked @toolbarCard times.
Edit (@toolbar)
Share (@toolbar)
Bubbles up (@toolbar)