特殊 JSX 属性
class
class 属性用于设置元素的 CSS 类名，className 是其别名。它支持字符串值和布尔对象两种格式，用于动态类管理。使用对象格式时，键代表各个类名（可以是多个空格分隔的类），布尔值决定是否应用每个类。需要注意的是，class 是一个编译时伪属性，这意味着它在展开操作中无法使用，如 <div {...props} />，此时类名需要显式指定。
示例：
// 字符串格式 - 静态类名
<div class="btn btn-primary">Click me</div>
// 对象格式 - 使用信号的动态类名
<div class={{
'btn': true,
'btn-primary': type() === 'primary',
'btn-disabled': isDisabled(),
'active': isActive()
}}>
Dynamic Button
</div>
style
style 属性使用字符串或样式对象来应用内联 CSS 样式。与 React 不同，Zess 使用原生的 element.style.setProperty 方法，需要使用标准的带连字符的小写 CSS 属性名（例如 background-color 而不是 backgroundColor）。这种方法具有性能优势，并完全支持 CSS 自定义属性。
示例：
// 字符串格式 - 传统样式声明
<div style="color: blue; font-size: 16px">
Static styles
</div>
// 对象格式 - 使用信号和 CSS 变量
<div style={{
'color': 'blue',
'font-size': fontSize() + 'px',
'background-color': getBgColor(),
'border': '1px solid var(--primary-color)'
}}>
Dynamic styles
</div>
innerHTML
innerHTML 属性直接在元素内部设置 HTML 内容，与原生的 DOM 属性一致。这允许插入格式化的内容，但需要谨慎使用，因为如果用于不受信任的内容，可能会使应用程序面临跨站脚本（XSS）攻击的风险。
示例：
// 来自信号的动态 HTML
<div innerHTML={sanitizedContent()}></div>
// 静态 HTML 内容
<div innerHTML="<span class='highlight'>Important</span>"></div>
textContent
textContent 属性为元素设置纯文本内容，等同于同名的 DOM 属性。它也接受 innerText 作为别名。与 innerHTML 不同，它将内容视为纯文本且不解析 HTML，从而避免 XSS 漏洞。
示例：
// 来自信号的基础文本
<div textContent={message()}></div>
// 使用 innerText 别名
<div innerText={userName() + "'s Profile"}></div>
// 纯文本内容
<div textContent="Simple text display"></div>
on___
Zess 中的事件处理器根据命名约定遵循两种不同的模式。小写名称如 onclick 使用原生 DOM 0 级事件绑定，直接将处理器附加到元素上。大写名称如 onClick 则采用事件委托，事件在文档根级别通过事件冒泡（或对不冒泡的事件使用事件捕获）进行处理，这在动态应用中显著提升了性能。事件绑定一次后保持静态，currentTarget 指向绑定元素，target 标识实际的事件源。
示例：
// 原生 DOM 0 级绑定（小写）
<button onclick={() => handleClick()}>
Native Event
</button>
// 委托绑定（大写）
<button onClick={(e) => handleDelegatedClick(e)}>
Delegated Event
</button>
// 带信号的表单事件
<input
onInput={(e) => setValue(e.target.value)}
onChange={(e) => saveValue(e.target.value)}
/>
ref
ref 属性在 JSX 流中提供对底层 DOM 元素的直接访问。它支持两种使用模式：变量赋值（元素自动赋值给指定变量）和函数回调（在元素挂载时接收元素实例）。当应用于自定义组件时，必须使用 props.ref 将 ref 显式转发到一个 DOM 元素。
示例：
// 变量赋值 - 元素自动赋值给 myDiv
let myDiv
// 使用 onMount 在组件渲染后访问 DOM 元素
onMount(() => console.log(myDiv))
// 元素挂载时将被赋值给 myDiv
<div ref={myDiv}>Content</div>
// 函数回调 - 在挂载时调用并传入元素实例
<input
ref={(el) => el.focus()}
value={text()}
/>
// 在另一个组件中使用组件引用
function ParentComponent() {
let myComp
// 在挂载后访问组件引用
onMount(() => console.log(myComp))
return <MyComponent ref={myComp} />
}
// 在 MyComponent 实现内部 - 将 ref 转发到 DOM 元素
function MyComponent(props) {
return <div ref={props.ref}>Component content</div>
}
