HTML Les attributs

Les attributs HTML dans les modèles Markup ne sont que des attributs HTML. Un changement de comportement spécifique est lié aux attributs booléens et en plus de cela, vos connaissances sur les attributs HTML sont transférées telles quelles.

Attributs booléens

Les attributs booléens dans HTML sont des attributs qui représentent les valeurs true ou false.

html`
    <p hidden="false">hidden text</p>
    <button disabled>click me</button>
    <input type="checkbox" checked="false" />
`.render(document.body)
// <p hidden="false">hidden text</p>        <- still hidden
// <button disabled="">click me</button>
// <input type="checkbox" checked="false">  <- still checked

Le problème avec les attributs booléens dans HTML est que leur donner la valeur false n'arrête pas leur effet sur l'élément. S'ils sont présents dans la balise, ils fonctionnent comme ayant la valeur true quelle que soit leur valeur.

Markup honore les valeurs true ou false et vous permet d'ajouter ou de supprimer ces attributs en spécifiant simplement leurs valeurs booléennes.

const hidden = false
const disabled = true
const checked = false

html`
    <p hidden="${hidden}">hidden text</p>
    <button disabled="${disabled}">click me</button>
    <input type="checkbox" checked="${checked}" />
`.render(document.body)
// <p>hidden text</p>
// <button disabled="true">click me</button>
// <input type="checkbox">

La définition d’une valeur d’attribut sur false (sous forme de chaîne ou booléen) ou nulle (undefined ou null) supprimera l’attribut.

const disabled = false
const checked = null

html`
    <p hidden="false">hidden text</p>
    <button disabled="${disabled}">click me</button>
    <input type="checkbox" checked="${checked}" />
`.render(document.body)
// <p>hidden text</p>
// <button>click me</button>
// <input type="checkbox">

Attributs de valeur

Markup est conscient de la valeur que vous injectez dans le modèle en tant que valeurs d'attribut et les suivra et les mettra à jour en conséquence. Aucune syntaxe supplémentaire n’est nécessaire pour que cela se produise.

const type = 'button'
const active = 'active'
const style = 'color: white; background: black'

html`
    <button
        type="${type}"
        class="btn ${active} common"
        style="border: none; ${style}"
    >
        click me
    </button>
`.render(document.body)
// <button type="button" class="btn active common" style="border: none; color: white; background: black">click me</button>

Attributs d'événement

HTML vous permet de déclarer des attributs d'événement en ligne et ils fonctionnent de la même manière avec le balisage. Aucune syntaxe supplémentaire n'est nécessaire pour ajouter des événements de pièce jointe, mais Markup effectue des tâches supplémentaires en arrière-plan sur lesquelles vous pouvez en apprendre davantage en lisant la documentation events.

const handleClick = (event) => {
    console.log(event)
}

html`<button onclick="${handleClick}">click me</button>`

Attribut de référence

Une chose qui existe dans Markup et non dans HTML est l'attribut ref qui vous permet de créer une référence à un élément que vous pouvez utiliser pour accéder à l'élément DOM rendu pour toute opération dont vous avez besoin. Vous pouvez lire sur les références pour plus de détails.

html`<button ref="btn">click me</button>`

Attributs en tant qu'objet

Il est bon de connaître tous les attributs possibles à l'avance, mais parfois ce n'est pas possible. Pour cela, vous pouvez collecter des attributs en tant qu'objets et simplement les injecter en remplacement si nécessaire.

const [count, setCount] = state(0)

const btn = ({ text = 'click me', ...props }) =>
    html` <button ${props} type="button">${text}</button>`

const countUp = () => {
    setCount((prev) => prev + 1)
}

const temp = html`
    <p>${count}</p>
    ${button({ text: '+', ariaLabel: 'count up button', onClick: countUp })}
`
/* renders:
<p>0</p>
<button type="button" aria-label="count up button">+</button>
*/

temp.render(document.body)

Tout attribut que vous définissez après avoir injecté l'objet d'attribut remplacera la valeur du nom d'attribut d'objet. Dans l'exemple ci-dessus, nous nous assurons que le type du bouton est toujours button en le définissant après avoir injecté l'objet props.

En outre, vous pouvez utiliser le nom de l'attribut camelcase pour le remplacer par kebab-case. Dans l'exemple ci-dessus, ariaLabel deviendra aria-label lors du rendu du bouton. Le onClick deviendra onclick et sera traité comme un attributs d'événement.