Error codes

String(…)

2 distinct messages: String(…) · diagnosticMessage(…)

expected exactly one @element(...) class per compiled module (the decorator must bind the canonical element import from '@openelement/element')

@element option "…" may appear only once

9 distinct messages: @element option "…" may appear only once · @element options must be an object literal · @element options must be named literal assignments · @element options support only root, delegatesFocus and formAssociated · @element requires a string tag name plus an optional options object · @element root "…" is unsupported; use "light", "shadow-open" or "shadow-closed" · @element root must be a string literal · @element tag "…" is not a custom-element name — use a lowercase name with at least one dash (my-element) · @element … must be a boolean literal

compiled classes must be named

2 distinct messages: compiled classes must be named · compiled classes must extend a canonical import of OpenElement or ErrorBoundary from '@openelement/element' (found ……)

compiled OpenElement classes must carry exactly one @element decorator

6 distinct messages: compiled OpenElement classes must carry exactly one @element decorator · method parameters may not carry decorators in the compiler grammar · methods may not carry decorators in the compiler grammar · unknown decorator on an OpenElement class; use only @element · unknown decorator on an OpenElement member; use only @property · unknown decorator on an OpenElement member; use only @property imported from '@openelement/element'

@property reflect must be a boolean literal

10 distinct messages: @property reflect must be a boolean literal · @property requires one options object literal · compiled @property fields must be ordinary initialized instance fields · compiled classes may declare static styles only once · compiled fields must carry exactly one @property decorator · compiled fields require an admitted initializer — a serializable literal, computed(...), or trustedHtml(...) · duplicate property "…" · property name "…" is unsafe — prototype-pollution primitives are on the shared deny list; rename the property · property names must be identifiers · static styles requires an initializer

compiled @element classes must be exported (optionally as the default export) without other class modifiers

4 distinct messages: compiled @element classes must be exported (optionally as the default export) without other class modifiers · compiled methods must be concrete instance methods · constructors, accessors and undecorated fields are outside the compiler grammar — declare state as @property fields and behavior as methods · method names must be identifiers

a server function component must be a single return of one JSX element

8 distinct messages: a server function component must be a single return of one JSX element · a server function component must return one element · compiled classes may declare only one render() method · compiled classes must declare render() · render() must be a single return of one JSX element · render() must be a synchronous zero-argument method · render() must return a single JSX element · render() must return one intrinsic JSX element

runtime top-level statements are outside the compiled module grammar — keep shared state in a plain module and import it; the island policy statement (export const openElement = defineIslandConfig(...)) is the one admitted runtime statement

component tag <…> is outside the compiler grammar (intrinsic lowercase elements and custom-element hosts only) — custom elements compose by tag name — use the tag string, not the class value

4 distinct messages: component tag <…> is outside the compiler grammar (intrinsic lowercase elements and custom-element hosts only) — custom elements compose by tag name — use the tag string, not the class value · itemTagReason · list Block item must be an intrinsic lowercase element or a custom-element host — compose by tag name, not class values · tagReason

attribute name "…" is unsafe — names must be valid HTML attribute names, not event handlers (on*) or forbidden sinks; use an admitted attribute name

17 distinct messages: attribute "…" must be a literal or a supported expression · attribute "…" must be a literal, this.<property>, or a supported expression · attribute "…" only accepts primitive literal values — use a string, number or boolean literal (objects and arrays have no attribute form) · attribute name "innerHTML" is unsafe as a static attribute — innerHTML opens only through the trusted-HTML sink: bind an Object-typed trustedHtml(...) property and carry the literal trustedHtml marker · attribute name "…" is unsafe — names must be valid HTML attribute names, not event handlers (on*) or forbidden sinks; use an admitted attribute name · conditional class branches must be string literals: class={this.<cond> ? 'a' : 'b'} · conditional class conditions must read at least one ….<property> · duplicate attribute "…" is unsupported — remove one; an element admits each attribute once · item template attribute "…" must be a static literal or {….<field>} · item template attributes must use primitive literals — use a string, number or boolean literal, or bind {….<field>} · key is only supported on the list Block item root · list Block items do not support spread attributes — write each attribute explicitly (a literal or {<item>.<field>}) · property sink name "…" is unsafe — prototype-pollution primitives are on the shared deny list on every boundary; rename the attribute · property sink name "…" is unsafe — prototype-pollution primitives are on the shared deny list on every boundary; rename the sink · ref must reference this.<field> · spread attributes are not supported by the compiler grammar — write each attribute explicitly (a literal or a this.<property> sink) · spread attributes are not supported in item templates — write each attribute explicitly (a literal or {<item>.<field>})

nested Blocks are outside the compiler grammar

9 distinct messages: a text-only ternary is not a Block — Blocks swap elements; derive the text in a computed(...) property and interpolate {this.<property>} · conditional Block branches must be single static JSX elements — each branch is exactly one element (bind its values as this.<property> attributes) · event handlers are only supported on list Block item templates · nested Blocks are outside the compiler grammar · nested ternaries are outside the compiler grammar — one condition per Block; derive the decision in a computed(...) property and branch on it · … — a branch cannot interpolate text; bind the value as an attribute (e.g. data-label={this.<property>}) · … — a ref cannot bind inside a branch · … — an event handler cannot bind inside a branch · … — an inline conditional class cannot bind inside a branch

list Block mapper must return one JSX element

14 distinct messages: JSX fragments and spreads are outside the compiler grammar — wrap the fragment's children in a single element · conditional Blocks support this.<property> compared with a numeric literal (>, >=, <, <=), a number/string/boolean equality (===, !==), or a bare this.<property> (optionally negated) truthiness test · dynamic child literals must be primitive values · item child must be {….<field>} · item templates support static text, item values and intrinsic elements · list Block items must bind at least one {<item>.<field>} value or attribute slot · list Block mapper must be a single-parameter arrow function · list Block mapper must return one JSX element · list Blocks must map over this.<property> · list Blocks support exactly this.<property>.map(...) · sink … cannot anchor in server function output · unsupported condition … · unsupported dynamic expression; use this.<property>, a supported condition, or this.<array>.map(...) · void element <…> may not have children

key must be key={<item>.<field>}

4 distinct messages: key must be key={<item>.<field>} · key must reference ….<field> · list Block items may declare key only once · list Block items require key={<item>.<field>}

… part path […] is preceded by a dynamic anchor; path-addressed fixed sinks must appear before any dynamic anchor sibling

event arithmetic supports only numeric += or -= literals

6 distinct messages: event arithmetic supports only numeric += or -= literals · event arrow handlers must contain exactly one supported action · event assignment values must be serializable literals · event handlers must be this.<method> or a single-action arrow · event mutations support only this.<number>++ or -- · unsupported event action; use this.<field>++, assignment or this.<method>()

custom-element host <…> may not carry event handlers — bind the handler on an intrinsic element, or attach the listener imperatively in a lifecycle method

3 distinct messages: custom-element host <…> may not carry a ref — query the host imperatively in a lifecycle method (e.g. connectedCallback) · custom-element host <…> may not carry event handlers — bind the handler on an intrinsic element, or attach the listener imperatively in a lifecycle method · custom-element host <…> may not have children in the compiler grammar (slots are unsupported)

property defaults must be serializable literals

property type/converter must be one of String, Number, Boolean, Array or Object

@property option "…" may appear only once

3 distinct messages: @property option "…" may appear only once · @property options must be named literal assignments · unsupported @property option "…" — admitted options are type, converter, reflect and attribute

a property with attribute: false cannot reflect

4 distinct messages: a property with attribute: false cannot reflect · duplicate property attribute "…" · property attribute must be a string literal or false · property attribute name "…" is unsafe — use a valid HTML attribute name (no on* handlers, no forbidden sinks)

computed field arrows may not declare parameters

11 distinct messages: computed field arrows may not declare parameters · computed field arrows use an expression body, not a block · computed field arrows use an expression body, not a block (keep derived values atomic) · computed fields take exactly one zero-argument arrow function · event actions may not write computed field "…" — assign its source properties · … may not nest non-arrow functions — hoist the function to module scope and import it · … may not read computed field "…" — read its source this.<property> inputs instead (computed fields cannot chain) · … may not read computed field "…" — read its source ….<property> inputs instead (computed fields cannot chain) · … may only read this.<declared property> (found this.…) · … may only read ….<declared property> (found ….…) · … may only reference this.<property>

computed fields require @property({ reflect: false, attribute: false }) — derived signals have no attribute channel

2 distinct messages: computed fields require @property({ reflect: false, attribute: false }) — derived signals have no attribute channel · computed fields require the canonical computed import: a runtime named import of computed from '@openelement/element'…

an innerHTML sink target must be otherwise childless (the sink owns its content)

8 distinct messages: an innerHTML sink target must be otherwise childless (the sink owns its content) · innerHTML sinks require an Object-typed TrustedHtml property · innerHTML sinks require the explicit trustedHtml capability marker · trustedHtml capability marker must be the literal true · trustedHtml capability marker requires an innerHTML sink · trustedHtml field defaults require the canonical trustedHtml import: a runtime named import of trustedHtml from '@openelement/element'… · trustedHtml field defaults require type: Object, reflect: false, and attribute: false · void element <…> cannot carry an innerHTML sink — move the sink to a container element (e.g. <div>)

unsupported @element provenance: …

2 distinct messages: unsupported @element provenance: … · unsupported @property provenance: …

duplicate sheet import binding "…" — a compiled module's .css imports bind distinct names so static styles can array them individually

3 distinct messages: duplicate sheet import binding "…" — a compiled module's .css imports bind distinct names so static styles can array them individually · the .css import "…" ("…") is never arrayed in static styles — every sheet import of a compiled module is adopted by its class · … — write the sheet to a .css file, import it (`import sheet from './<component>.css'`) and array the binding in static styles; inline sheet strings are retired (#1558)

island config root "…" is unsupported; use "light" or "shadow"

3 distinct messages: island config root "…" is unsupported; use "light" or "shadow" · island config root must be a string literal · the island config declares root "…" but @element('…', { root: '…' }) compiles a …-rooted program. The @element decorator owns the root — point the config at the light component (@element(tag, { root: 'light' })) or drop the config's root field so the two agree.

event handlers are a client-only construct — a server function component renders static HTML and may not carry …; interactivity belongs to an @element island (a compiled component), not to server markup

2 distinct messages: event handlers are a client-only construct — a server function component renders static HTML and may not carry …; interactivity belongs to an @element island (a compiled component), not to server markup · refs are a client-only construct — a server function component renders static HTML and may not carry a ref; element access belongs to an @element island (a compiled component), not to server markup

the props parameter must be a plain identifier

18 distinct messages: "…" is reserved for the generated constructor imports (…) — remove or rename the module-scope binding · <…> is not a server function component — import it from the module that exports it (a server function component composes only by direct call to another server function component; @element components compose by tag name) · a server function component has no this — read the props parameter (props.<field>) instead; `this` belongs to the @element class path · a trustedHtml sink cannot cross a __ssr host — pass the trusted value as the component's own property instead · component prop "…" must be a literal or a props.<field> read · component prop "…" must be a literal or a props.<field> read — arbitrary expressions are outside the server function grammar · component prop names must be plain identifiers · server function component … may not be async — a component returns its HTML synchronously; async data belongs in the route loader · server function component … may not declare type parameters · server function component … must have a body · server function component … takes at most one props parameter · the props parameter must be a plain identifier · the props parameter must be annotated inline as an object type literal (props: { name: string }) — type aliases and interfaces are outside the server function grammar · the props type admits property signatures only · this exported function renders JSX but is not an admitted server function component (a component is a single return of one JSX element) — runtime JSX has no interpreter in the server lane; fix the shape or move it out of the module · … "…" is not a plain identifier — the generated module writes it into an identifier position, so the compiler refuses to emit it · … takes at most one props parameter · ….children is not declared — add `children?: string` to the props type: the JSX children a caller nests compose it as one final-HTML string