Utilidad de elemento - Markup por Before Semicolon

Utilidad de elementos

typescript
interface ElementOptions<A> {
    attributes?: A
    textContent?: string
    htmlContent?: string
    childNodes?: Node[]
    ns?: 'http://www.w3.org/1999/xhtml' | 'http://www.w3.org/2000/svg'
}

type element = <A>(tagName: string, options?: ElementOptions<A>) => Element

El atributo element es simplemente una función que le permite crear elementos DOM en una sola llamada.

Normalmente, cuando trabajamos con elementos DOM, los creamos y luego los ensamblamos.

javascript
const button = document.createElement('button')
button.type = 'button'
button.textContent = 'click me'

button.addEventListener('click', () => {
    console.log('clicked')
})

Son muchos pasos para crear un botón simple. Aquí ocurre lo mismo usando element:

javascript
const button = element('button', {
    textContent: 'click me',
    attributes: {
        type: 'button',
        onclick: () => {
            console.log('clicked')
        },
    },
})

element utiliza addEventListener detrás de escena y maneja valores no primitivos detectando fácilmente elementos de componentes web.

childNodes y htmlContent

Las opciones childNodes y htmlContent le permiten componer elementos más complejos fácilmente dependiendo de cómo desee abordarlos.

A continuación se muestra un ejemplo que utiliza la opción childNodes:

javascript
element('ul', {
    attributes: { id: 'items-list' },
    childNodes: [
        element('li', {
            attributes: { class: 'list-item' },
            textContent: 'item 1',
        }),
        element('li', {
            attributes: { class: 'list-item' },
            textContent: 'item 2',
        }),
        element('li', {
            attributes: { class: 'list-item' },
            textContent: 'item 3',
        }),
    ],
})

Ahora un ejemplo de lo mismo usando la opción htmlContent:

javascript
element('ul', {
    attributes: { id: 'items-list' },
    htmlContent:
        '<li class="list-item">item 1</li>' +
        '<li class="list-item">item 2</li>' +
        '<li class="list-item">item 3</li>',
})

La principal diferencia aquí es el hecho de que al usar childNodes puede especificar valores de función y propiedad para los atributos, mientras que htmlContent solo toma un HTML estático que desea usar.

Componentes web

La mejor parte de trabajar con element es con componentes web. Manejará todos los props no primitivos para garantizar que los componentes web obtengan los datos como deberían.

javascript
const item = element('todo-item', {
    attributes: {
        data: {
            id: crypto.randomUUID(),
            name: 'buy groceries',
            status: 'pending',
            dateCreated: new Date(),
        },
    },
})

elementos SVG

Para crear elementos SVG, puede especificar la opción ns con el valor de http://www.w3.org/2000/svg y eso le dará cualquier elemento SVG.

javascript
const rect = element('rect', {
    ns: 'http://www.w3.org/2000/svg',
    attributes: {
        x: 10,
        y: 10,
        width: 100,
        height: 100,
    },
})

editar este documento