Una introducción detallada a los elementos personalizados

 

 

 

  • Implemente rápidamente. Implementar inteligentemente
  • SmashingConf New York 2024

  • Índice
    1. "¿Cuál es el objetivo de los elementos personalizados?"
    2. "¿Pero no podemos crear elementos personalizados ahora mismo en HTML?"
    3. "¿Son fáciles de crear los elementos personalizados?"
    4. "Todavía no entiendo cuál es el problema"
    5. "¿Se pueden ampliar los elementos existentes para utilizar esta API?"
    6. “Está bien, esto es genial. ¿Qué otra cosa?"
    7. "¿Cómo funcionan los elementos personalizados con otras funciones de componentes web?"
    8. "¿Puedo utilizar elementos personalizados hoy?"
    9. "¿Qué pasa con la accesibilidad?"
    10. “¿Adónde debo ir ahora?”

    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, en primer lugar, que hablaré de elementos personalizados (sustantivo común) cuando hable del concepto y de elementos personalizados (nombre propio) cuando hable de la tecnología y, en segundo lugar, que mi humor tiende a desgastarse 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 la misma función y tiene el mismo conjunto de propiedades y funciones aplicadas, entonces debería poder nombrarlo según lo que hace. Tenemos el videoelemento para mostrar video, el selectelemento para mostrar un cuadro de selección, el imgelemento para mostrar imágenes (y evitarnos tener 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 el ritmo de cambio. Entonces, los elementos personalizados tratan de brindarnos a nosotros, los desarrolladores, flexibilidad para crear elementos basados ​​en su función y brindarnos acceso de bajo nivel para definir sus propiedades.

    Si los elementos que creamos quedan bien establecidos, 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 teórico, podemos. Es asquerosamente fácil. Simplemente abre tu editor de texto favorito y crea un elemento en un documento HTML, así:

    apes…/apes

    Ábrelo en un navegador. Funciona. Puede diseñarlo y adjuntarle eventos de JavaScript. Puede que no sea “válido” (¿a quién le importa eso hoy en día, 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ías hacer eso, y tal vez incluso haría que tu marcado fuera un poco más comprensible para otras personas, pero esa es realmente la única ventaja que aporta. Los elementos personalizados son más inteligentes que eso y aportan beneficios reales y mensurables. Llegaremos a 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 frase anterior. El primer paso es pensar en un buen nombre. La única regla aquí es que, para evitar conflictos con elementos HTML actuales o futuros, debes usar un guión en alguna parte del nombre. Por ejemplo:

    great-apes…/great-apes

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

    document.registerElement('great-apes');

    Ahora el DOM reconocerá su great-apeselemento recién registrado y podrá comenzar la verdadera diversión. Por cierto, para confundir aún más la terminología, un elemento creado de esta manera 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 problema"

    Tengan paciencia conmigo, impaciente lector teórico. La gran diferencia entre elementos personalizados insignificantes y etiquetas personalizadas poderosas (espero que no les sorprenda que use ese término) es la interfaz que está expuesta al DOM. Los elementos personalizados, no registrados y no reconocidos, utilizan la HTMLUnknownElementinterfaz, mientras que las etiquetas personalizadas registradas y reconocidas utilizan la HTMLElementinterfaz.

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

    Para iniciar esto, primero debe definir un nuevo prototipo y 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 debe usar nuestro prototipo recién definido: Euromillones con ChatGPT IA

    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 bien, este es el ejemplo más simple que se me ocurre, pero tómate un minuto para considerar cómo podría extenderse aún más: agregar propiedades, atributos y eventos únicos a cada elemento; poner marcado en su elemento que se representa con contenido pasado como valores de atributo; incluso tener elementos sin interfaz de usuario pero que realizan funciones como consultas a bases de datos. Honestamente, la oportunidad aquí es enorme .

    Como ejemplo rápido de cuán excepcionalmente útiles pueden ser los elementos personalizados, vea el elemento de Eduardo Lundgrengoogle-maps , que incorpora un mapa de Google y puede tener opciones pasadas a través de valores de atributos, 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í, lo interesante es que podemos 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 y luego agregaríamos una pequeña cantidad de un nuevo argumento en las opciones del registerElement()método, como por ejemplo:

     

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

    El valor del extendsargumento informa al DOM que el elemento personalizado está destinado a extender el tableelemento. Ahora, tenemos que hacer que el tableelemento informe al DOM que quiere ser extendido, usando el isatributo:

    table is="great-apes"…/table

    El humilde tableelemento 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 es posible que eso no te emocione?

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

    video is="video-camera"/video

    “Está bien, esto es genial. ¿Qué otra cosa?"

    Un conjunto de eventos de devolución de llamada (con nombres brillantemente prosaicos) se activan a lo largo del ciclo de vida de los eventos personalizados: cuando se crea un elemento ( createdCallback), se adjunta al DOM ( attachedCallback) o se separa 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 funciones complementarias del conjunto de componentes web (y otras funciones generalmente relacionadas). Por ejemplo, podría incluir marcado en el templateelemento , 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 entre múltiples archivos y sitios web sería muy simple 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 por sí solos.

    "¿Puedo utilizar elementos personalizados hoy?"

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

    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 manera de evitar esto y es utilizar Polymer. En caso de que no haya oído hablar de él, es un proyecto comunitario abierto creado para hacer que las tecnologías web futuras sean utilizables hoy y que incluye componentes web y, a través de ellos, elementos personalizados. Polymer es a la vez una biblioteca de desarrollo, que utiliza implementaciones nativas cuando están disponibles y polyfills donde no, y una biblioteca de interfaz de usuario, con elementos y patrones comunes creados utilizando 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 crear.

    "¿Qué pasa con la accesibilidad?"

    Ah, lector teórico, aquí me tienes. El uso de elementos personalizados conlleva una gran advertencia: se requiere JavaScript . Sin él, su nuevo elemento simplemente no funcionará y volverá a ser algo antiguo HTMLUnknownElement. A menos que los navegadores adopten su elemento de forma nativa, 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. Le recomiendo encarecidamente agregar roles y atributos ARIA a sus elementos personalizados, tal como lo hacen 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.

    “¿Adónde debo ir ahora?”

    En casa, para tener un buen acostado. O, si prefieres seguir leyendo sobre Elementos personalizados, prueba algunos de estos enlaces:

    • Polímero Este es el proyecto del que hablé hace tres párrafos. ¿Realmente necesitas que te lo explique otra vez?
    • Elementos personalizados Esta es una galería de componentes web propiedad de la comunidad.
    • “ Elementos personalizados: definición de nuevos elementos en HTML ”, Eric Bidelman, HTML5 Rocks El artículo de Bidelman fue invaluable para mí al escribir este artículo.
    • “ Elementos personalizados ”, W3C La especificación es bastante impenetrable, pero tal vez usted obtenga más provecho de ella que yo.

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

    (un poco)

    Créditos de las imágenes de la portada: Dmitry Baranovskiy .

    Explora más en

    • Codificación
    • javascript
    • Componentes web





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    Una introducción detallada a los elementos personalizados

    Una introducción detallada a los elementos personalizados

    Implemente rápidamente. Implementar inteligentemente SmashingConf New York 2024 Índice '¿Cuál es el ob

    programar

    es

    https://aprendeprogramando.es/static/images/programar-una-introduccion-detallada-a-los-elementos-personalizados-840-0.jpg

    2024-05-20

     

    Una introducción detallada a los elementos personalizados
    Una introducción detallada a los elementos personalizados

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20