Éléments et attributs

Écrivez du HTML en JSX avec des attributs typés et une sérialisation adaptée à chaque valeur.

Les éléments en minuscules sont du HTML#

Les éléments en minuscules sont des balises HTML. Les composants portent une majuscule. Les noms des balises sont validés par le runtime.

import { renderToString } from "@vincle/core";

const html = await renderToString(
  <>
    <input type="text" />
    <br />
  </>,
);

<input type="text" /><br />

Un élément vide ne reçoit pas d’enfants#

Un élément vide comme <br> ou <img> ne peut pas recevoir d’enfants. Vincle refuse ce contenu plutôt que de produire un document ambigu.

[vincle/core] <img> is a void element and cannot have children: move the content next to it, not inside.

<img src={src}>Caption</img>       // ❌ throws
<img src={src} alt="Caption" />    // ✅
<figure><img src={src} /><figcaption>Caption</figcaption></figure>  // ✅

Attributs#

Utilisez class ou className, for ou htmlFor. Les aliases connus sont convertis ; les attributs personnalisés et data-* sont conservés. Les valeurs sont échappées.

import { renderToString } from "@vincle/core";

const html = await renderToString(<div className="foo" class="bar" />);

<div class="bar"></div>

Booléens et valeurs falsy#

Les attributs booléens connus sont présents pour true et absents pour false. Les attributs ARIA conservent leur valeur textuelle. null et undefined omettent l’attribut.

<button disabled={isBusy}>Save</button>
// isBusy true  → <button disabled>Save</button>
// isBusy false → <button>Save</button>

L’attribut style#

style accepte une chaîne ou un objet de propriétés CSS. Les noms sont normalisés, les noms dangereux sont écartés et les valeurs sont échappées. Le contenu CSS de confiance reste à la charge de l’application.

import { renderToString } from "@vincle/core";

// String style
const html1 = await renderToString(<p style="color: red; font-size: 1.5rem;">Hello</p>);

// Object style (camelCase → kebab-case conversion)
const html2 = await renderToString(<p style={{ color: "red", fontFamily: "sans-serif" }}>Hello</p>);

Gestionnaires d’événements#

Les gestionnaires d’événements sont des attributs HTML sous forme de chaînes, pas des callbacks. Passer une fonction provoque une erreur. Préférez un script externe lorsque votre CSP interdit le JavaScript inline.

Attributs personnalisés#

Les attributs data-*, les éléments personnalisés et les augmentations de types permettent d’intégrer d’autres outils. Les types spécifiques d’une intégration appartiennent à son package.

Pour continuer#

Consultez les types JSX, les composants et le modèle de sécurité.