Krypton Solid

Una introducción detallada a los elementos personalizados – Revista Smashing

Una introducción detallada a los elementos personalizados – Revista Smashing

Los componentes web son un conjunto de tecnologías conectadas destinadas a hacer que los elementos sean reutilizables en la web. La mayor parte de la conversación ha girado en torno a Shadow DOM, pero probablemente la tecnología más transformadora de la suite son los elementos personalizados. un método para definir sus propios elementos, con su propio comportamiento y propiedades.

Probablemente haya escuchado todo el ruido sobre los componentes web y cómo van a cambiar el desarrollo web para siempre. Si no lo ha hecho, ha estado viviendo bajo una roca, está leyendo este artículo por accidente o tiene una vida plena y ocupada que no le deja tiempo para leer sobre tecnologías web inestables y especulativas. Bueno, yo no.

Esa es una descripción bastante ambigua, por lo que el objetivo de este artículo es explicar para qué sirven los elementos personalizados, por qué son tan transformadores y cómo usarlos. Tenga en cuenta, primero, que hablaré sobre elementos personalizados (sustantivo común) al discutir el concepto y Elementos personalizados (nombre propio) cuando se habla de tecnología y, en segundo lugar, que mi humor tiende a debilitarse muy rápidamente. Sigamos adelante.

«¿Cuál es el objetivo de los elementos personalizados?»

La idea básica es que si crea un elemento que siempre desempeña el mismo rol y tiene el mismo conjunto de propiedades y funciones aplicadas, entonces debería poder nombrarlo por lo que hace. Tenemos el video elemento para mostrar video, el select elemento para mostrar un cuadro de selección, el img elemento para mostrar imágenes (y evitar que tengamos que escribir dos caracteres cada vez que lo escribimos). Muchos elementos describen su propia función.

Pero Hoy en día, la Web tiene que hacer mucho más trabajo que antes.y HTML no siempre puede mantenerse al día con la tasa de cambio. Por lo tanto, los elementos personalizados se tratan de darnos a nosotros, los desarrolladores, flexibilidad para crear elementos basados ​​en su función y darnos acceso de bajo nivel para definir sus propiedades.

Si los elementos que creamos se establecen bien, podrían convertirse en una parte completamente estandarizada de una futura especificación HTML. Las cosas que hacemos podrían definir el futuro de las cosas que hacemos.

«¿Pero no podemos crear elementos personalizados ahora mismo en HTML?»

Tienes razón, lector imaginario, podemos. Es asquerosamente fácil. Simplemente abra su editor de texto favorito y cree un elemento en un documento HTML, así:


<apes>…</apes>

Ábrelo en un navegador. Funciona. Puede diseñarlo, adjuntarle eventos de JavaScript. Puede que no sea «válido» (¿a quién le importa eso en estos días, verdad, niños?), Pero funciona. Puede hacerlo con el nombre que desee y creará un nuevo elemento en línea.

Bueno, sí. Seguro. Ciertamente podría hacer eso, y tal vez incluso haría que su marcado fuera un poco más comprensible para otras personas, pero esa es realmente la única ventaja que brinda. Los elementos personalizados son más inteligentes que eso y aportan beneficios reales y cuantificables. Veremos los beneficios de los elementos personalizados en un momento; Primero, quiero mostrar lo fácil que es hacer uno.

«¿Son fáciles de crear los elementos personalizados?»

Lo son, te lo acabo de decir en la oración anterior. El primer paso es pensar en un buen nombre. La única regla aquí es que, para evitar chocar con elementos HTML actuales o futuros, debe usar un guión en algún lugar del nombre. Por ejemplo:


<great-apes>…</great-apes>

Cuando haya decidido un nombre, el siguiente paso es registrarlo en el DOM, lo que se hace pasando el nombre como argumento en JavaScript. registerElement() método, así:


document.registerElement('great-apes');

Ahora el DOM reconocerá su recién registrado great-apes elemento y la verdadera diversión puede comenzar. Por cierto, para confundir aún más la terminología, un elemento creado así que no está definido en la especificación HTML se conoce como «etiqueta personalizada», así que no se sorprenda si uso ese término.

«Todavía no entiendo cuál es el gran problema»

Ten paciencia conmigo, impaciente lector imaginario. La gran diferencia entre elementos personalizados insignificantes y etiquetas personalizadas poderosas (espero que no le sorprenda que use ese término) es la interfaz que está expuesta al DOM. Los elementos personalizados, no registrados y no reconocidos, utilizan el HTMLUnknownElement interfaz, mientras que las etiquetas personalizadas registradas y reconocidas utilizan la HTMLElement interfaz.

¿Cual es la diferencia? Con un HTMLElement, podemos agregar nuestros propios métodos y propiedades, creando esencialmente una API por elemento. Espera, he subestimado lo asombroso que es: una API por elemento !!! Sí, cada etiqueta personalizada puede tener su propia API.

Para iniciar esto, primero debe definir un nuevo prototipo, luego adjuntarle sus propiedades y métodos. En este ejemplo, estoy creando un método llamado hoot() que registra un mensaje en la consola:


var apeProto = Object.create(HTMLElement.prototype);
apeProto.hoot = function() {
  console.log('Apes are great!');
}

El siguiente paso es registrar el elemento, como antes, solo que esta vez agregando un argumento en las opciones de registerElement() para indicar que debería usar nuestro prototipo recién definido:


document.registerElement('great-apes', {prototype: apeProto});

Una vez hecho esto, puede consultar su elemento en el DOM y llamar al método:


var apes = document.querySelector('great-apes');
apes.hoot();

Ahora, este es el ejemplo más simple que se me ocurre, pero tómese un minuto para considerar cómo podría extenderse aún más: agregando propiedades, atributos y eventos únicos a cada elemento; poner marcado en su elemento que se renderiza con contenido pasado como valores de atributo; incluso tener elementos sin interfaz de usuario pero que realizan funciones como consultas a la base de datos. Honestamente, la oportunidad aquí es enorme.

Como ejemplo rápido de lo excepcionalmente útiles que pueden ser los elementos personalizados, consulte Eduardo Lundgren google-maps elemento, que incrusta un mapa de Google y puede tener opciones pasadas a través de valores de atributo, como este:


<google-maps latitude="-8.034881" longitude="-34.918377"></google-maps>

«¿Se pueden ampliar los elementos existentes para utilizar esta API?»

Vaya, realmente haces las preguntas más convenientes. Sí, con emoción, nosotros lata crear elementos personalizados que amplíen los elementos existentes. Sí, podemos crear una API completamente nueva para elementos HTML existentes. Lo sé, esto suena como las divagaciones de un loco, ¿verdad? ¡Pero es verdad!

Como ejemplo, creemos una tabla que tenga nuestro hoot() método adjunto. Para hacer esto, seguiríamos todos los pasos de la sección anterior, luego haríamos la pequeña adición de un nuevo argumento en las opciones del registerElement() método, a lá:


document.registerElement('great-apes', {
  prototype: apeProto,
  extends: 'table'
});

El valor de la extends El argumento informa al DOM que el elemento personalizado está destinado a extender el table elemento. Ahora, tenemos que hacer el table informa al DOM que quiere ser extendido, usando el is atributo:


<table is="great-apes">…</table>

El humilde table El elemento ahora puede tener su propia API. Por ejemplo, podría consultar sus propios datos en una interfaz estandarizada. ¡Una tabla que tiene una API para consultar sus propios datos! ¿Cómo no emocionarse con eso?

Para ver un ejemplo del mundo real de un elemento extendido, eche un vistazo a Eduardo Lundgren video-camera, que extiende el video elemento para usar la entrada en vivo de getUserMedia():


<video is="video-camera"></video>

“Está bien, esto es genial. ¿Qué más?»

Se activa un conjunto de eventos de devolución de llamada (con nombres brillantemente prosaicos) a lo largo del ciclo de vida de los eventos personalizados: cuando se crea un elemento (createdCallback), adjunto al DOM (attachedCallback) o separado del DOM (detachedCallback), o cuando se cambia un atributo (attributeChangedCallback). Por ejemplo, para ejecutar una función anónima cada vez que se crea una nueva instancia de una etiqueta personalizada en una página, usaría esto:


apeProto.createdCallback = function () {…};

«¿Cómo funcionan los elementos personalizados con otras funciones de componentes web?»

Los elementos personalizados se han diseñado para una interoperabilidad completa con las características complementarias del paquete de componentes web (y otras características generalmente relacionadas). Por ejemplo, puede incluir marcado en el template elemento, que el navegador no analizará hasta que se inicie el elemento.


<great-apes>
  <template>…</template>
</great-apes>

Puede asegurarse de que el código interno esté encapsulado desde el navegador y oculto al usuario final con Shadow DOM. Y compartir su elemento a través de múltiples archivos y sitios web sería una simplicidad en sí misma usando HTML Imports.

Si aún no está familiarizado con ninguna de estas otras tecnologías, no se preocupe: los elementos personalizados también funcionan perfectamente bien por sí solos.

«¿Puedo usar elementos personalizados hoy?»

Bueno no. Y si. Estos no son solo algunos conceptos de pastel en el cielo; Los proveedores de navegadores ya están trabajando en ellos: las últimas versiones de Chrome y Opera han implementado el registerElement() método, y también aterrizó recientemente en Firefox Nightly. Sin embargo, los elementos personalizados sin procesar aún no están realmente listos para su uso en producción.

Los gorilas son grandes simios ... Mira, era esto o una captura de pantalla de JavaScript.
Los gorilas son grandes simios … Mira, era esto o una captura de pantalla de aún más código JavaScript. (Créditos de la imagen: Marieke IJsendoorn-Kuijpers)

Sin embargo, hay una forma de evitar esto, y es usar Polymer. En caso de que no haya oído hablar de él, es un proyecto de comunidad abierta creado para hacer que las tecnologías web futuras sean utilizables hoy, y eso incluye componentes web y, a través de ellos, elementos personalizados. Polymer es tanto una biblioteca de desarrollo, que utiliza implementaciones nativas cuando están disponibles y polyfills donde no, como una biblioteca de interfaz de usuario, con elementos y patrones comunes construidos con su propia tecnología.

Lectura recomendada: Aplicación de las mejores prácticas en sistemas basados ​​en componentes

Si está interesado en los elementos personalizados y, como ha leído casi hasta el final de este artículo, le sugiero que probablemente lo esté, entonces Polymer es su mejor opción para aprender y hacer.

«¿Qué pasa con la accesibilidad?»

Ah, lector imaginario, aquí me tienes. El uso de elementos personalizados viene con una gran advertencia: Se requiere JavaScript. Sin él, su nuevo elemento simplemente no funcionará y volverá a ser simplemente un viejo HTMLUnknownElement. A menos que su elemento sea adoptado de forma nativa por los navegadores, simplemente no hay forma de evitarlo. Simplemente planifique una alternativa elegante, como debería hacer con JavaScript de todos modos.

En cuanto a una mayor accesibilidad, realmente depende de usted. Sugiero encarecidamente agregar ARIA roles y atributos para sus elementos personalizados, al igual que los elementos de la interfaz de usuario predeterminados del navegador en la actualidad, para garantizar que todos obtengan una experiencia de primera clase con ellos.

«¿A dónde voy ahora?»

Hogar, para descansar bien. O, si prefiere seguir leyendo sobre Elementos personalizados, pruebe algunos de estos enlaces:

(Muchas gracias a Addy Osmani y Bruce Lawson por sus comentarios durante la redacción de este artículo).

Créditos de la imagen de la portada: Dmitry Baranovskiy.

Deja un comentario