Static-tag intrinsic: `<element tag={tag}>` for elements whose tag is fixed at definition time

[ryansolid]

Problem

Libraries that build components around a native element whose tag is fixed at definition time — styled.li, styled("button"), any design-system primitive factory — have no good way to render that element:

• dynamic(() => tag) is the only isomorphic path from a tag string to an element. It pays a factory memo plus a per-instance memo (and a hydration id) for a value that never changes. In yak-bench's browser hydrate matrix, the lane that renders the styled element through dynamic() is 1.47× slower (geomean) than the same code with the element compiled from a literal tag; everything else in the two lanes is identical. One memo per element is the entire gap.
• A runtime factory (element(tag) returning a component) removes the memos but can't take spreads natively: a use-site {...rest} has to be merged into a props object and crossed through a component boundary before spread() sees it, and static attributes are walked instead of compiled.
• Hand-rolling it means an isServer fork over internals (getNextElement, runHydrationEvents, sharedConfig.hydrating vs ssrElement), which is what next-yak/next-yak#644 did.

Profiling the composition-heavy SSR cases (tabs) shows Solid's own rendering at ~7% of time and props plumbing (merge, omit, proxies, and the GC they generate) at ~55%; the styled-element seam is where most of that plumbing is introduced.

Proposal

A reserved intrinsic whose tag comes from an in-scope identifier:

function styled(tag) {
  return props => (
    <element tag={tag} {...filtered(props)} class={cls(props)}>
      {props.children}
    </element>
  );
}

The compiler lowers it exactly as it would a literal tag, with createElement(tag) in place of the template clone:

• DOM: hydrating ? getNextElement() : createElement(tag); spread(el, [filtered, { get class() {…} }]) (the sources array from perf(web): spread() creates fewer reactive nodes and accepts a sources array #3419/feat(compiler): emit the spread/ssrElement sources array for multi-source element spreads #3423); insert(el, () => props.children); runHydrationEvents() when hydrating. Two reactive nodes with children, one without, zero memos. Static child subtrees compile to their own templates and are appended; dynamic children go through insert.
• SSR: ssrElement(tag, [filtered, { class }], () => props.children, true) — one walk (feat(web): ssrElement accepts an array of prop sources and a skip predicate #3418), _hk on the element. Hydration ids stay aligned because both sides do exactly what a compiled spread root does today.
• Universal: renderer createElement(tag) + spread.

The string element never reaches the DOM or the SSR output; the compiler consumes it. <element> without tag is a compile error, not a fall-through to a real tag.

Static rule

tag is an expression evaluated once, untracked, when the element is created — the same contract as <Provider value>. It is never reactive, and the compiler does not try to prove it constant (a binding in an enclosing scope can be reassigned; constancy isn't globally provable, so a scope rule would restrict real code while guaranteeing nothing). The lowering reads it exactly once (createElement(tag) / ssrElement(tag, …)); later changes to whatever it was read from are ignored, as with value.

• <element> without tag is a compile error, not a fall-through to a real tag.
• dynamic() / <Dynamic component> remain the answer for a tag that can change; the per-instance memo is the price of being dynamic. The two features stay vocabulary-distinct (as → Dynamic, tag → element), and the IntrinsicElements.element doc comment states the read-once rule so it shows on hover.

Why not <element:tag>

The namespaced form was considered first — it has the nice property that JSXNamespacedName can only hold a bare identifier, so props.as is syntactically impossible. Both parsers accept it and TS 6.0.3 types it through a template-literal index signature. But TS treats element:tag as the string "element:tag": the variable is never bound, so noUnusedLocals/noUnusedParameters flag tag (TS6133, verified), unbound identifiers aren't errors, and rename/go-to-definition are blind. That is exactly the use: directive experience. Putting the tag in an expression position (tag={tag}) gives TS the binding; the read-once rule is a documented contract, as it is for <Provider value>.

Naming

• element: not in HTML, SVG, or MathML, nor in Solid's IntrinsicElements or either compiler's tag tables. The only history is the Web Components v0 declarative <element name="x-foo">, removed from the spec in August 2013 and never shipped unflagged. Custom elements can't claim it (hyphen required).
• tag, not name: name is a real attribute on the elements most likely to be wrapped (input, button, select, textarea, form, iframe, …) and is routinely forwarded through the spread; there is no HTML/SVG/MathML attribute called tag. is is out for the same reason (customized built-ins; forwarded).

Typing

IntrinsicElements.element: HTMLAttributes<HTMLElement> & { tag: string }. Necessarily generic (no per-tag narrowing — the tag is a variable), ref is HTMLElement. Attribute checking, children, and ref all work under --strict; the doc comment carries the static rule so it shows on hover.

Non-goals

• Compile-time folding of fully static styled elements into strings (what yak does for its React build). Separate question.
• A reactive or async tag. That is Dynamic.
• A runtime element(tag) factory. Not needed once the syntax exists; h/html already take string tags.

Plan

Babel + Oxc: DOM, SSR, universal lowering (missing tag is an error), shared test expectations (parity). IntrinsicElements.element typing. Parity-harness hydration scenario (server ssrElement ↔ client getNextElement + spread sources). yak-bench prim-element overlay switched to it for the before/after against the dynamic() lane.

— Claude via Cursor

[ryansolid]

Deferred (Sep 14) — not rejected. Working through who would actually use it:

• yak doesn't need JSX for this. Its runtime is hand-written and already calls spread(el, [props, attrs, {class, style}]) / ssrElement(tag, [...]) directly — the array form, no merge. <element> would be sugar over what it has.
• Kobalte can't take it as-is: as is public API and reactive today (<Tabs.Trigger as={isLink() ? "a" : "button"}> works). <element tag> is read-once by design, so adopting it is a documented API narrowing on their side, not something we can assume. Their path is dynamic(() => props.as) in Polymorphic plus the static-source detection now tracked in Constant-tag Dynamic / dynamic() should take the compiled-element path #3387.
• The mixed-spread argument (94% of Kobalte's 174 Polymorphic sites carry named attrs + spread, 0 are pure spreads) is real — an element gets the array form where a component gets a merge() proxy — but it only pays if <element> is at the leaf. Behind a Polymorphic component the call-site merge stays regardless.

So its constituency is JSX-authored code that owns its tags and accepts read-once: app design systems (Box, Text as=), libraries willing to state the contract, plus the no-spread inline case where per-attribute lowering with no spread() call is a large win a runtime factory can never reach. That's a good feature on its own merits, but it isn't the fix for the gap we've been measuring, and it's a syntax commitment. Revisit with numbers once #3387 and the view work land, and after talking to the Kobalte folks about whether read-once as is on the table for their v2 — they'd be the largest user.

Related: <Dynamic> is deprecated in favor of dynamic() (#3437); the "double wrapper" (merge({component}, …) at the call site + omit(props, "component") inside) was a property of that wrapper's shape, not an argument for new syntax.

— Claude via Cursor