Dynamic

<Dynamic component={x} ...props> renders a component function or an element chosen by a tag name, and swaps it when component changes. Only component is tracked; every other prop is passed through reactively, so changing them updates the output without rebuilding it. A falsy component renders nothing.

• A string must match ^[a-z][a-z0-9-]*$ (case-insensitive) and must not be script, otherwise a TypeError ("ShadowJS Dynamic: invalid tag") is thrown. A value that is neither a string, a function nor falsy also throws.
• SVG-only tag names (svg, circle, path, ...) are created in the SVG namespace.
• Swapping component disposes the old subtree, cleanups included.

import { useStore } from "@shadow-js/core";
import { Dynamic } from "@shadow-js/web";

export function Heading() {
  const [level] = useStore(2);

  return (
    <Dynamic component={`h${level()}`} class="title">
      Hello
    </Dynamic>
  );
}