{"id":824,"date":"2019-04-14T19:47:48","date_gmt":"2019-04-15T01:47:48","guid":{"rendered":"https:\/\/www.pensemosweb.com\/?p=824"},"modified":"2024-04-14T16:36:53","modified_gmt":"2024-04-14T22:36:53","slug":"como-crear-un-componente-web-template-y-shadow-dom","status":"publish","type":"post","link":"https:\/\/pensemosweb.com\/en\/como-crear-un-componente-web-template-y-shadow-dom\/","title":{"rendered":"\u00bfC\u00f3mo crear un componente web? Shadow DOM y etiqueta template"},"content":{"rendered":"

\u00bfC\u00f3mo logramos encapsulaci\u00f3n de nuestros nuevos elementos HTML que no provoque conflictos con el resto de una aplicaci\u00f3n?<\/strong>, es decir, que los estilos, HTML interno y JS de un componente web, no colisionen con el resto. <\/p>\n\n\n\n

La respuesta b\u00e1sicamente es, el Shadow DOM<\/strong>. El Shadow DOM nos permite tener los estilos y contenido HTML interno totalmente aislado del exterior. Tambi\u00e9n se ayuda del API del DOM<\/strong> and custom elements<\/strong> para establecer comunicaci\u00f3n con otros elementos y componentes internos. Adem\u00e1s con el exterior.<\/p>\n\n\n\n

\n

El amor es de naturaleza interna. No lo vas a encontrar en alguien m\u00e1s, naces con ello, es un componente interno de cada persona. Mira a un beb\u00e9, simplemente es feliz por el hecho de existir. Irradia amor, te lo comparte.<\/p>\nAn\u00f3nimo<\/cite><\/blockquote>\n\n\n\n

Antes de comenzar, si a\u00fan no est\u00e1s familiarizado con los custom elements<\/strong> y los componentes web<\/strong> nativos en general, te recomiendo revisar primero estas publicaciones:<\/p>\n\n\n\n

    \n
  1. Componentes web, \u00bfQu\u00e9 son? POO<\/a><\/li>\n\n\n\n
  2. \u00bfC\u00f3mo crear un componente web? Elementos HTML personalizados<\/a><\/li>\n<\/ol>\n\n\n\n

    Primero vamos a revisar la etiqueta <template><\/code>, para luego utilizarla dentro de nuestro componente web usando shadow DOM.<\/p>\n\n\n\n

    \u00bfQu\u00e9 es una plantilla?<\/h2>\n\n\n\n

    Un template o plantilla HTML con el tag <template><\/code>, es una forma de crear elementos visuales de manera sencilla y eficiente, de tal forma que se pueden definir partes de una p\u00e1gina web o aplicaci\u00f3n a las cuales les podemos insertar valores.<\/p>\n\n\n\n

    Este template puede ser reutilizado en diferentes vistas de una aplicaci\u00f3n. Tal vez est\u00e9s familiarizado con jade, pug, mustache, o con algunos frameworks y librer\u00edas como angular y vue, los cuales utilizan templates. Tambi\u00e9n si has utilizado wordpress y php, los archivos de los temas serian una especie de templates.<\/p>\n\n\n\n

    Ahora, los templates que vamos a aprender son espec\u00edficos de HTML y por lo tanto funcionan en los navegadores web. Para entrar un poco m\u00e1s en contexto veamos un ejemplo sencillo de como podemos crear varios elementos para mostrar un saludo, utilizaremos estas tres fuciones, que forman parte del API del DOM.<\/p>\n\n\n\n

      \n
    • document.createDocumentFragment()<\/code><\/li>\n\n\n\n
    • document.createElement('nombreTag', [opciones])<\/code><\/li>\n\n\n\n
    • nodo.appendChild(nodo)<\/code><\/li>\n<\/ul>\n\n\n\n

      Queremos mostrar en nuestra aplicaci\u00f3n un saludo al usuario y lo hacemos de la siguiente forma:<\/p>\n\n\n\n