Varendo

Text

Render trusted/plain text with locale and wrapping; no untrusted HTML interpolation.

FamilyfoundationLicenseApache-2.0
StandaloneAvailable

Use the web element directly without the semantic runtime.

Semantic bindingAvailable

A registered presentation adapter can bind this component to host-owned meaning and state.

Automatic adaptationNo standard recipe

The standard recipe resolver does not select this component automatically.

Import and live example

One trusted text value rendered as a paragraph.

Interactive preview requires JavaScript.

View the complete example source
import {registerAeliqoElements} from "@varendo/web";
import {
  AeliqoAvatarElement,
  AeliqoBadgeElement,
  AeliqoButtonElement,
  AeliqoGridElement,
  AeliqoHeadingElement,
  AeliqoIconButtonElement,
  AeliqoLinkElement,
  AeliqoScrollAreaElement,
  AeliqoSeparatorElement,
  AeliqoSplitPaneElement,
  AeliqoStackElement,
  AeliqoSurfaceElement,
  AeliqoTextElement,
} from "@varendo/web/foundation";



registerAeliqoElements();

const host = document.querySelector<HTMLElement>("#aeliqo-example") ?? (() => {
  const created = document.createElement("div");
  created.id = "aeliqo-example";
  (document.body ?? document.documentElement).append(created);
  return created;
})();

function createCatalogRoot(container: HTMLElement): HTMLElement {
  const root = document.createElement("div");
  root.dataset.catalogSourceRoot = "true";
  root.style.display = "grid";
  root.style.gap = "12px";
  container.append(root);
  return root;
}

function createCatalogElement<T extends HTMLElement>(tagName: string, container: HTMLElement): T {
  const element = document.createElement(tagName) as T;
  element.setAttribute("data-aeliqo-theme", "light");
  container.append(element);
  return element;
}

function appendSlottedText(root: HTMLElement, slot: string, textContent: string): void {
  const content = document.createElement("span");
  content.slot = slot;
  content.textContent = textContent;
  root.append(content);
}

const root = createCatalogRoot(host);
(((root) => {
		const element = createCatalogElement<AeliqoTextElement>("aeliqo-text", root);
		element.text = "A plain, trusted text value.";
		element.as = "p";
	}))(root);

Purpose

Renders a trusted string in the element you choose, with optional muted styling. The value is inserted as text, never parsed as HTML.

When to use it

When to use a different component

Properties and defaults

Text is inserted as text content and cannot introduce markup.

Properties, ownership, and initial values
PropertyUse and ownershipDeclared typeInitial value
textProvides trusted plain text content. The component never interprets it as HTML.string''
asSupplies as to the component as application-owned input.AeliqoTextAs'span'
mutedApplies the lower-emphasis text treatment without changing semantics.booleanfalse

Events

States and failure handling

Relevant states:

Expected result: The value is rendered with the requested semantic element.

Keyboard, focus, and accessibility

Keyboard behavior:

Exposed semantics:

Responsive behavior

Text follows its parent width. Allow long values to wrap and avoid fixed-height containers when zoom or localization adds lines.

Style hooks

Generated TypeScript declaration

View generated declaration
export declare class AeliqoTextElement extends AeliqoFoundationElement {
    static readonly properties: {
        text: {
            type: StringConstructor;
        };
        as: {
            type: StringConstructor;
        };
        muted: {
            type: BooleanConstructor;
            reflect: boolean;
        };
    };
    text: string;
    as: AeliqoTextAs;
    muted: boolean;
    protected render(): import("lit").TemplateResult<1>;
    static readonly styles: import("lit").CSSResult[];
}

Version

This page documents the Varendo 0.6 component contract.