{"id":21005,"date":"2019-10-08T09:05:56","date_gmt":"2019-10-08T07:05:56","guid":{"rendered":"https:\/\/www.teldat.com\/sin-categorizar\/21005\/tecnologia-web-components\/"},"modified":"2022-12-19T17:39:37","modified_gmt":"2022-12-19T15:39:37","slug":"tecnologia-web-components","status":"publish","type":"post","link":"https:\/\/teldatnwp-dev.azurewebsites.net\/es\/blog\/tecnologia-web-components\/","title":{"rendered":"\u00bfC\u00f3mo crear web components?"},"content":{"rendered":"

\"lorenaLos Web Components<\/strong><\/em> son un est\u00e1ndar del World Wide Web Consortium (W3C) cuya finalidad es crear nuevos elementos para la web<\/strong>. Adem\u00e1s, tambi\u00e9n se podr\u00e1n reutilizar<\/strong> <\/em>f\u00e1cilmente y extender<\/strong><\/em>, tanto los componentes que desarrollemos, como los nativos. Son parte del navegador, y por lo tanto, no es necesaria ninguna biblioteca externa<\/strong> como jQuery, por ejemplo. Para utilizar nuestros web components, solo ser\u00e1 necesaria una sentencia en nuestro HTML.<\/p>\n


\nLo ideal, por tanto, ser\u00eda que estuviera disponible en todos los sitios sin que suponga un riesgo su adopci\u00f3n<\/strong>, que proporcione un alto rendimiento<\/strong> sin necesidad de sacrificar tiempo de ejecuci\u00f3n, y que se mantengan las etiquetas sem\u00e1nticas y declarativas.<\/p>\n

\u00bfQu\u00e9 son los web components?<\/h2>\n

Los web components est\u00e1n basados en la combinaci\u00f3n de cuatro tecnolog\u00edas diferentes<\/strong> que pueden usarse por separado:<\/p>\n

Custom Elements<\/strong><\/p>\n

Sus caracter\u00edsticas son las siguientes:
\n\u2022 El elemento Custom Elements global se usa para definir un elemento<\/strong> personalizado como extender uno ya creado o nativo, y notificar al navegador sobre una nueva etiqueta.
\n\u2022 Es necesario que el nombre est\u00e9 compuesto de dos palabras separadas por un gui\u00f3n,<\/strong> para que el analizador de HTML pueda distinguir los elementos personalizados de los comunes. Tambi\u00e9n garantiza la compatibilidad con futuras etiquetas HTML.
\n\u2022 Debe extender la clase HTMLElement.<\/strong> La extensi\u00f3n de HTMLElement garantiza que el elemento personalizado herede toda la API de DOM, lo cual significa que las propiedades o los m\u00e9todos que agregues a la clase formar\u00e1n parte de la interfaz del DOM del elemento. En el caso de extender elementos nativos, se deber\u00e1 extender de la interfaz correcta del DOM. Por ejemplo, un elemento personalizado que extiende debe heredar contenido de <HTMLButtonElement en lugar de HTMLElement>.<\/em><\/p>\n

HTML Templates<\/strong><\/p>\n

Permite definir fragmentos de HTML que pueden ser clonados o insertados en un documento.<\/p>\n

Shadow DOM<\/strong><\/p>\n

\u2022 Nos permite tener un DOM independiente donde sus elementos y estilos no afectan a otros.
\n\u2022 Sustituiremos el m\u00e9todo connectedCallback<\/em> <\/strong>por el constructor.<\/p>\n

ES Modules<\/strong><\/p>\n

Es el est\u00e1ndar de ECMAScript<\/strong> para importar m\u00f3dulos Javascript<\/strong>. Permite tanto la carga s\u00edncrona como as\u00edncrona de los mismos, los puede analizar est\u00e1ticamente, y por lo tanto, nos ofrecer\u00e1 una carga m\u00e1s \u00f3ptima de nuestras dependencias.<\/p>\n

Creando un Web Component<\/h2>\n

1. Custom Element<\/strong><\/p>\n

El primer paso es crear nuestro Custom Element.<\/p>\n

1. Definimos el nombre de nuestra etiqueta HTML, siempre teniendo en cuenta que debe estar compuesta de dos palabras separadas por un guion.
\n2. Creamos una clase en un fichero index.js en el que definiremos nuestro Custom Element extendiendo de HTMLElement.
\n3. A\u00f1adimos a nuestra clase el m\u00e9todo connectedCallback con el fin de que se dispare nuestro m\u00e9todo una vez haya sido a\u00f1adido al DOM.
\n4. Conectamos la etiqueta que hemos creado con la clase de nuestro componente mediante el m\u00e9todo \u201cdefine\u201d, y de este modo haremos saber a nuestro HTML que debe renderizar. Por ejemplo: Window.customElements.define(\u2018etiqueta-componente\u2019, ClaseComponente)
\n5. Cargaremos el index.js a nuestro index.html, y usaremos el elemento creado.<\/p>\n

2. Shadow DOM<\/strong><\/p>\n

El Shadow DOM nos va a permitir tener un DOM completamente independiente, cuyos elementos y estilos no afecten a otros. Gracias a esta independencia evitamos cualquier efecto no deseado.<\/p>\n

1. Lo primero, en lugar del m\u00e9todo connectedCallback<\/strong><\/em>, utilizaremos el constructor.
\n2. A continuaci\u00f3n, indicaremos que el elemento va a ser adjuntado a un Shadow DOM.
\n3. Para terminar, reutilizaremos el innerHTML que ten\u00edamos pero insert\u00e1ndolo en la ra\u00edz del Shadow DOM.<\/p>\n

3. HTML templates<\/strong><\/p>\n

Es otra forma de conseguir lo mismo que con Shadow DOM<\/strong>. La diferencia radica en que, para separar la implementaci\u00f3n del elemento del template, usaremos ES Modules.<\/em><\/p>\n

El elemento permite declarar fragmentos de DOM que se analizan, permanecen inactivos durante la carga de la p\u00e1gina y se pueden activar m\u00e1s adelante en el tiempo de ejecuci\u00f3n.<\/p>\n

Los web components nos facilitan una herramienta para definir nuevas etiquetas HTML en el navegador y crear componentes reutilizables<\/strong>.<\/p>\n

\u2022 Es compatible con varios navegadores<\/strong> para crear y extender componentes reutilizables.
\n\u2022 No requiere una biblioteca,<\/strong> ni tampoco framework.
\n\u2022 Proporciona un modelo de programaci\u00f3n conocido,<\/strong>DOM\/CSS\/HTML.
\n\u2022 Se integra totalmente <\/strong>con DevTools del navegador.
\n\u2022 Permite aprovechar las caracter\u00edsticas de accesibilidad <\/strong>existentes.<\/strong>
\n\u2022 Posibilita una reducci\u00f3n del c\u00f3digo<\/strong>, su modularizaci\u00f3n y una mayor capacidad de reutilizaci\u00f3n.
\n\u2022 Se puede hacer casi cualquier cosa <\/strong>que pueda hacerse con HTML, CSS y Javascript.<\/p>\n

El departamento de I+D+I<\/strong> de Teldat utiliza la tecnolog\u00eda de web components en sus soluciones SD-WAN<\/a>, tanto para grandes corporaciones como en las soluciones para pymes.
\nEsta tecnolog\u00eda incrementa la eficiencia del equipo de I+D+I y<\/p>\n","protected":false},"excerpt":{"rendered":"

Los Web Components son un est\u00e1ndar del World Wide Web Consortium (W3C) cuya finalidad es crear nuevos elementos para la web. Adem\u00e1s, tambi\u00e9n se podr\u00e1n reutilizar f\u00e1cilmente y extender, tanto los componentes que desarrollemos, como los nativos. Son parte del navegador, y por lo tanto, no es necesaria ninguna biblioteca externa como jQuery, por ejemplo. […]<\/p>\n","protected":false},"author":202,"featured_media":19719,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[1168],"tags":[1118],"class_list":["post-21005","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tecnologia-sd-wan","tag-desarrollo-web"],"acf":[],"wpml_current_locale":"es_ES","wpml_translations":[{"locale":"en_US","id":19716,"slug":"web-components-technology","post_title":"Web components \u2013 understanding the technology","href":"https:\/\/teldatnwp-dev.azurewebsites.net\/web-components-technology\/"}],"_links":{"self":[{"href":"https:\/\/teldatnwp-dev.azurewebsites.net\/es\/wp-json\/wp\/v2\/posts\/21005","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/teldatnwp-dev.azurewebsites.net\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/teldatnwp-dev.azurewebsites.net\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/teldatnwp-dev.azurewebsites.net\/es\/wp-json\/wp\/v2\/users\/202"}],"replies":[{"embeddable":true,"href":"https:\/\/teldatnwp-dev.azurewebsites.net\/es\/wp-json\/wp\/v2\/comments?post=21005"}],"version-history":[{"count":0,"href":"https:\/\/teldatnwp-dev.azurewebsites.net\/es\/wp-json\/wp\/v2\/posts\/21005\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/teldatnwp-dev.azurewebsites.net\/es\/wp-json\/wp\/v2\/media\/19719"}],"wp:attachment":[{"href":"https:\/\/teldatnwp-dev.azurewebsites.net\/es\/wp-json\/wp\/v2\/media?parent=21005"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/teldatnwp-dev.azurewebsites.net\/es\/wp-json\/wp\/v2\/categories?post=21005"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/teldatnwp-dev.azurewebsites.net\/es\/wp-json\/wp\/v2\/tags?post=21005"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}