Tag #

A union type representing all valid values for an element tag.

Syntax #

type Tag = string | symbol | Component;

Description #

The Tag type defines what can be used as the first argument to createElement or as a JSX tag. It encompasses three categories:

String tags (host elements) #

Standard HTML or SVG element names like "div", "span", "svg", etc. These are rendered as actual DOM elements by the DOM renderer.

<div>Content</div>
<input type="text" />

Symbol tags (special tags) #

Built-in special tags that have special rendering behavior:

Portal - Renders into a different root
Copy - Preserves previous content
Text - Explicit text nodes
Raw - Raw HTML injection

Fragment is also a special tag, but it is the empty string (""), not a symbol.

<Fragment>
  <div>One</div>
  <div>Two</div>
</Fragment>

Component functions #

Functions that return renderable content. Can be sync, async, or generator functions.

function Greeting({name}) {
  return <div>Hello, {name}!</div>;
}

<Greeting name="World" />

Examples #

Type narrowing #

import type {Tag} from "@b9g/crank";
import {Fragment} from "@b9g/crank";

function getTagName(tag: Tag): string {
  if (typeof tag === "function") {
    return tag.name || "Anonymous";
  } else if (typeof tag === "string") {
    return tag;
  } else {
    // tag is symbol
    return tag.description || "Anonymous";
  }
}

getTagName("div");       // "div"
getTagName(Fragment);    // "" (Fragment is the empty string)
getTagName(MyComponent); // "MyComponent"

Generic element types #

import type {Element, Tag} from "@b9g/crank";

// Element with any tag
let element: Element<Tag>;

// Element with string tag only (host elements)
let hostElement: Element<string>;

// Element with specific tag
let divElement: Element<"div">;

API Reference