Atributos de HTML

Los atributos HTML en las plantillas Markup son solo atributos HTML. Un cambio de comportamiento específico está relacionado con atributos booleanos y, además, su conocimiento sobre los atributos HTML se transfiere tal cual.

atributos booleanos

Los atributos booleanos en HTML son atributos que representan valores true o false.

javascript
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

El problema con los atributos booleanos en HTML es que darles el valor false no detiene su efecto en el elemento. Si están presentes en la etiqueta, funcionan con el valor true sin importar su valor.

Markup respeta los valores true o false y le permite agregar o eliminar estos atributos simplemente especificando sus valores booleanos.

javascript
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">

Establecer un valor de atributo en false (como cadena o booleano) o nulo (undefined o null) eliminará el atributo.

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">

Atributos de valor

Markup conoce el valor que usted inyecta en la plantilla como valores de atributo y los rastreará y actualizará en consecuencia. No es necesaria una sintaxis adicional para que esto suceda.

javascript
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>

Atributos del evento

HTML le permite declarar atributos de eventos en línea y funcionan igual con el marcado. No se necesita sintaxis adicional para agregar eventos adjuntos, pero Markup hace cosas adicionales en segundo plano sobre las que puede obtener más información leyendo los documentos eventos.

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

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

Atributo de referencia

Una cosa que existe en Markup y no en HTML es el atributo ref que le permite crear una referencia a un elemento que puede usar para acceder al elemento DOM renderizado para cualquier operación que necesite. Puede leer sobre referencias para obtener más detalles.

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

Atributos como objeto

Es bueno conocer todos los atributos posibles de antemano, pero a veces eso no es posible. Para eso, puede recopilar atributos como objetos y simplemente inyectarlos según sea necesario.

javascript
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)

Cualquier atributo que establezca después de inyectar el objeto de atributo anulará el valor del nombre del atributo del objeto. En el ejemplo anterior, nos aseguramos de que el type del botón sea siempre button configurándolo después de inyectar el objeto props.

Además, puede utilizar el nombre del atributo camelcase para cambiarlo a kebab-case. En el ejemplo anterior, ariaLabel se convertirá en aria-label cuando se procese el botón. El onClick cambiará a onclick y se manejará como [atributos de evento](#event-attributes de evento).

editar este documento