Web Component by Kenny Yuen https://padlet.com/kenny_yuen19/v9dhc977ddqn Hecho con magia en-us 2018-05-18 17:06:56 UTC 2023-02-14 21:41:10 UTC hello@padlet.com Kenny Yuen kenny_yuen19 https://padlet.com/kenny_yuen19/v9dhc977ddqn/wish/262062031 Web Component
XIIºB]]> 2018-05-18 22:39:59 UTC https://padlet.com/kenny_yuen19/v9dhc977ddqn/wish/262062031 Web component kenny_yuen19 https://padlet.com/kenny_yuen19/v9dhc977ddqn/wish/262062104 Los componentes web son un conjunto de características que actualmente están siendo añadidas por el W3C a las especificaciones HTML y DOM de forma que permite la creación de widgets o componentes reutilizables en documentos y aplicaciones web.1​ La intención de estos componentes es traer la ingeniería basada en componentes a la World Wide Web. El modelo de componentes permite la encapsulación e interoperabilidad de elementos de HTML individuales.]]> 2018-05-18 22:41:22 UTC https://padlet.com/kenny_yuen19/v9dhc977ddqn/wish/262062104 Características kenny_yuen19 https://padlet.com/kenny_yuen19/v9dhc977ddqn/wish/262062134 2018-05-18 22:41:51 UTC https://padlet.com/kenny_yuen19/v9dhc977ddqn/wish/262062134 Elementos Personalizados kenny_yuen19 https://padlet.com/kenny_yuen19/v9dhc977ddqn/wish/262062197 Hay dos tipos de elementos personalizados: autónomos e integrados. Los elementos personalizados autónomos son elementos HTML completamente diferenciados de los elementos HTMLnativos, se construyen esencialmente desde abajo hacia arriba utilizando la API de elementos personalizados. Los elementos personalizados integrados son elementos que se construyen sobre elementos HTML nativos para reutilizar su funcionalidad.

]]> 2018-05-18 22:43:00 UTC https://padlet.com/kenny_yuen19/v9dhc977ddqn/wish/262062197 Shadow DOM kenny_yuen19 https://padlet.com/kenny_yuen19/v9dhc977ddqn/wish/262062230 Shadow DOM es una funcionalidad que permite al navegador web renderizar elementos DOM sin necesidad de insertarlos en el árbol principal DOM del documento. Esto crea una barrera entre lo que el desarrollador y el navegador pueden alcanzar; el desarrollador no puede acceder al Shadow DOM de la misma manera que lo haría con los elementos anidados, mientras que el navegador puede renderizar y modificar ese código de la misma manera que lo haría con los elementos anidados. La consecuencia de esto es que para el CSS incluido en el shadow DOM de un elemento en particular los elementos HTML pueden ser encapsulados sin el riesgo de que los estilos CSS se filtren y afecten a los elementos que no se suponía que afectaran. Aunque estos elementos están encapsulados en HTML y CSS, todavía pueden disparar eventos que pueden ser recogidos por otros elementos del documento.


El subárbol incluido en un elemento se llama shadow tree. El elemento al que se adjunta el Shadow tree es un Shadow host.


Shadow DOM siempre debe estar conectado a un elemento existente, ya sea adjuntandolo como elemento literal o mediante scripting. En JavaScript, el Shadow DOM se une a un elemento utilizando Element. attachShadow ().


La capacidad de incluir HTML y CSS es esencial para la creación de elementos personalizados. Si el shadow DOM no existiese, diferentes elementos personalizados externos podrían interactuar de forma indeseada.

]]> 2018-05-18 22:43:51 UTC https://padlet.com/kenny_yuen19/v9dhc977ddqn/wish/262062230 Soporte del Navegador kenny_yuen19 https://padlet.com/kenny_yuen19/v9dhc977ddqn/wish/262062304
Las plantillas HTML tienen soporte en Google Chrome, Mozilla Firefox, Edge de Microsoft, Safari, y Ópera.


La compatibilidad con la versión inicial de elementos personalizados y Shadow DOM, conocida como "v0", está presente en algunos navegadores basados en Blink como Google Chrome y Opera, y en Mozilla Firefox (requiere un cambio de configuración manual). Los nuevos elementos personalizados y las APIs "v1" de Shadow DOM están siendo implementadas en Safari 10, Google Chrome (53.0.2785), y en desarrollo en Mozilla Firefox. Microsoft Edge aún no ha comenzado a implementar Custom Elements o Shadow DOM.


La compatibilidad con navegadores más antiguos está implementada utilizando Polyfills basado en JavaScript.

]]> 2018-05-18 22:45:15 UTC https://padlet.com/kenny_yuen19/v9dhc977ddqn/wish/262062304 Bibliotecas kenny_yuen19 https://padlet.com/kenny_yuen19/v9dhc977ddqn/wish/262062339 Hay varias librerías que están construidas sobre componentes web con el objetivo de aumentar el nivel de abstracción al crear elementos personalizados. Cuatro de las bibliotecas más importantes son: X-Tag, Slim.js, Polymer y Bosonic.


Dos de ellos, Bosonic y Polymer, proporcionan componentes listos para usar. Estos componentes se pueden utilizar indistintamente, ya que todos ellos están construidos con tecnologías web abiertas

]]> 2018-05-18 22:46:00 UTC https://padlet.com/kenny_yuen19/v9dhc977ddqn/wish/262062339 kenny_yuen19 https://padlet.com/kenny_yuen19/v9dhc977ddqn/wish/262062389 2018-05-18 22:46:50 UTC https://padlet.com/kenny_yuen19/v9dhc977ddqn/wish/262062389 kenny_yuen19 https://padlet.com/kenny_yuen19/v9dhc977ddqn/wish/262062429 2018-05-18 22:47:31 UTC https://padlet.com/kenny_yuen19/v9dhc977ddqn/wish/262062429