# AiRendererBoundary
## Description
BitAiRendererBoundary contains a failure inside one custom renderer, so the rest of the conversation survives it. Custom renderers are handed data a model produced - shapes their author did not anticipate, and values that are still streaming - and without a boundary one such shape throws during rendering and takes the whole page with it. With one, the failed piece is replaced by a notice that says which piece failed, and the next render tries it again. It adds no element around content that renders.
## Parameters
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| ChildContent | `RenderFragment?` | null | The content to protect - typically a custom renderer of model output. It is rendered with no element of the boundary's own around it. What it throws while it renders, in the lifecycle methods of its components or in their event handlers replaces it with the notice; what a fire-and-forget task throws does not reach the boundary. For a throw to be caught it has to happen inside a component of the content: a RenderFragment that throws while the boundary itself builds it is the parent's failure. |
| Classes | `BitAiRendererBoundaryClassStyles?` | null | Custom CSS classes for different parts of the renderer boundary. |
| Label | `string?` | null | What the notice says once the content has failed. Left null, the RenderFailed text of the BitAiStrings in force ("This content could not be rendered") is shown. The message of the exception is the notice's tooltip either way. |
| Styles | `BitAiRendererBoundaryClassStyles?` | null | Custom CSS styles for different parts of the renderer boundary. |
| 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 |
| :--- | :--- | :------------ | :---------- |
| 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. |
## Sub Classes
### BitAiRendererBoundaryClassStyles Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Root | `string?` | null | Custom CSS classes/styles for the root element of the BitAiRendererBoundary, which is rendered only once its content has failed: the block the notice stands in. |
| Notice | `BitTagClassStyles?` | null | Custom CSS classes/styles for the notice (a BitTag) the BitAiRendererBoundary renders in place of its failed content. |
## Examples
\n**Basic**:
```razor
```
```csharp
private readonly string osloForecast = """{"city":"Oslo","degrees":-3,"condition":"Snow"}""";
// The same forecast in a shape the card was not written for: its temperature is an object, not "degrees".
private readonly string unexpectedForecast = """{"city":"Lisbon","temperature":{"value":17,"unit":"C"},"condition":"Clear"}""";
```
`WeatherCard.razor`:
```razor
@using System.Text.Json
The forecast a model produced, as JSON.
[Parameter, EditorRequired] public string Json { get; set; } = default!;
private string? city;
private int degrees;
private string? condition;
// Written for the complete shape only: a partial payload, or one without a field, throws here - which is the
// failure a BitAiRendererBoundary around the card contains.
protected override void OnParametersSet()
{
using var document = JsonDocument.Parse(Json);
var root = document.RootElement;
city = root.GetProperty("city").GetString();
degrees = root.GetProperty("degrees").GetInt32();
condition = root.GetProperty("condition").GetString();
}
}
```
`WeatherCard.razor.scss`:
```scss
.weather-card {
gap: 0.75rem;
display: flex;
max-width: 20rem;
align-items: center;
box-sizing: border-box;
padding: 0.75rem 1rem;
border-radius: 0.5rem;
color: var(--bit-clr-fg-pri);
background-color: var(--bit-clr-bg-sec);
border: 1px solid var(--bit-clr-brd-sec);
}
.weather-card-city {
font-weight: 600;
}
```
\n**Label**:
```razor
```
```csharp
private readonly string unexpectedForecast = """{"city":"Lisbon","temperature":{"value":17,"unit":"C"},"condition":"Clear"}""";
```
\n**Recovery**:
```razor
Stream the forecast
}
```
```csharp
private const string aucklandForecast = """{"city":"Auckland","degrees":22,"condition":"Showers"}""";
private string streamed = "";
private bool isStreaming;
private async Task StreamForecastAsync()
{
isStreaming = true;
streamed = "";
// A model writes the JSON a few characters at a time; every render on the way tries the card again.
foreach (var chunk in aucklandForecast.Chunk(12))
{
streamed += new string(chunk);
StateHasChanged();
await Task.Delay(400);
}
isStreaming = false;
}
```
\n**Cascading parameters**:
```razor
```
```csharp
// osloForecast and unexpectedForecast are the ones of the Basic example; WeatherCard is its WeatherCard.razor tab.
private readonly BitAiRendererBoundaryParams[] rendererBoundaryParams =
[
new()
{
// Lands on the notice of a boundary whose content failed: the content that renders keeps its own look.
Style = "padding: 0.5rem; border-radius: 0.5rem; background-color: var(--bit-clr-bg-sec);",
Styles = new() { Notice = new() { Root = "border-style: dashed;", Text = "font-style: italic;" } },
},
];
```
\n**Style & Class**:
```razor
```
\n**RTL**:
```razor
```
@city
@degrees °C, @condition
@(streamed.Length > 0 ? streamed : "nothing received yet")
@if (streamed.Length > 0)
{