Advanced JSX Attributes

@once

Compiler directive to prevent reactive wrapping for static values. Reduces overhead for values that never change.

<MyComponent static={/*@once*/ state.wontUpdate} />

Works on children too:

<MyComponent>{/*@once*/ state.wontUpdate}</MyComponent>

When to use:

• Values that are truly static
• Performance optimization for non-reactive props
• Compile-time optimization to reduce reactive overhead

attr:*

Forces prop to be treated as an HTML attribute instead of a property. Essential for Web Components.

<my-element attr:status={props.status} />

Use case: Web Components where you need to set attributes (not properties).

Note: Type definitions required when using TypeScript.

bool:*

Controls presence of attribute based on truthy/falsy value. Most useful for Web Components.

<my-element bool:status={prop.value} />

When prop.value is truthy:

<my-element status />

When falsy:

<my-element />

Use case: Conditional attributes for Web Components.

Note: Type definitions required when using TypeScript.

prop:*

Forces prop to be treated as a DOM property instead of an attribute. For properties like scrollTop.

<div prop:scrollTop={props.scrollPos} />

Use case: Setting DOM properties directly (e.g., scrollTop, custom properties).

Note: Type definitions required when using TypeScript.

textContent

Sets the text content of an element. Replaces all child nodes with a single text node.

<div textContent={message()} />

Warning: This replaces all children. Use carefully.

innerHTML

Sets the HTML content directly. Dangerous - use only with sanitized content.

<div innerHTML={sanitizedHtml()} />

Security warning:

• Only use with trusted, sanitized HTML
• Never use with user-generated content without sanitization
• Consider alternatives like textContent or structured JSX

Best Practices

1. Use @once for truly static values to optimize performance
2. Use attr:*, bool:*, prop:* for Web Components integration
3. Use textContent only when you need to replace all children
4. Avoid innerHTML unless absolutely necessary and content is sanitized
5. Provide TypeScript definitions for custom attributes/properties