Saltar al contenido
Closer Marketing

Presentación completa de los elementos de la red en 2021

Todos contamos proyectos que no queremos hacer. El código se volvió incontrolable, el alcance evolucionó, se aplicaron correcciones a otras rectificaciónes y la estructura colapsó bajo el peso del código espagueti. Codificar puede ser realmente tedioso.

El emprendimiento se beneficia del uso de módulos simples y también independientes con una sola compromiso. El código modular está encapsulado, con lo que no tiene que preocuparse por implementarlo; Siempre y cuando sepa qué devuelve el módulo con las entradas en serie, posiblemente no necesite entenderlo De qué forma Logró este propósito.

El término modular es simple de aplicar a un solo lenguaje de programación, pero el avance web necesita una combinación de varias tecnologías. El navegador analiza HTML, CSS y JavaScript para mostrar el contenido, el estilo y la utilidad de la página.

No en todos los casos son simples de confundir porque:

  • El código importante se puede dividir en tres o más ficheros y
  • Los estilos globales y los objetos de JavaScript pueden interferir entre sí de formas inopinadas.

Estos inconvenientes son complementarios a los problemas con ejecuciones de lenguaje, marcos, bases de datos y otras dependencias utilizadas en el servidor.

¿Qué es un ingrediente web?

Los componentes de red dan una manera de crear bloques de código encapsulados con una sola responsabilidad que se tienen la posibilidad de volver a utilizar en cualquier página.

Ver HTML Etiqueta. Según la dirección de Internet, el espectador puede emplear controles como reproducir, interrumpir, rebobinar, seguir veloz y ajustar el volumen.

Los estilos y funcionalidades están libres, pero puede cambiarlos utilizando múltiples atributos y llamadas a la Interfaz de programación de aplicaciones de JavaScript; cualquier número Los elementos se tienen la posibilidad de poner en otras etiquetas, no chocan entre sí.

¿Qué ocurre si precisa sus funciones personalizadas? Por poner un ejemplo, ¿un elemento que exhibe la proporción de expresiones en una página? Sin código HTML marca (todavía).

Los marcos como React y Vue.js permiten a los programadores hacer elementos web cuyo contenido, estilos y funcionalidades se pueden definir como un solo archivo JavaScript. Estos resuelven muchos inconvenientes de programación complejos, pero recuerde:

  • Precisa aprender a utilizar el marco y actualizar su código conforme se lleva a cabo.
  • Los componentes escritos en un marco pocas veces son compatibles con otro marco.
  • La popularidad de los marcos cambia. Dependen de los antojos y preferencias del equipo de avance y de los usuarios.
  • Los componentes web normales tienen la posibilidad de agregar una funcionalidad de navegador que es difícil de poder con JavaScript solo (como Shadow DOM).

Afortunadamente, los conceptos comunes que se utilizan en bibliotecas y marcos de forma frecuente se incorporan a los estándares online. Tomó un tiempo, pero llegaron los componentes web.

El término modular es simple de aplicar a un solo lenguaje de programación, pero el avance web requiere una combinación de múltiples tecnologías. 👩‍💻 Leer mucho más en esta guía⬇️Lleve a cabo clic para twittear

Una breve historia de las partes web

Una vez que se generaran varios fallos específicos del distribuidor, Alex Russell presentó el término de elementos de red estándar por vez primera en la Fronteers Conference 2011. La biblioteca de polímeros de Google+ (polyfill basado en la propuesta actual) salió al mercado un par de años después, pero las primeras implementaciones no aparecieron en Chrome y Safari hasta 2016.

Los proveedores de navegadores se tomaron el tiempo para negociar los datos, pero se agregaron elementos web a Mozilla firefox en 2018 y Edge en 2020 (cuando Microsoft cambió al motor Chromium).

Es comprensible que solo unos pocos programadores estén preparados o sean capaces de llevar a cabo elementos web, pero por último obtuvimos un óptimo soporte para navegadores por medio de una API estable. No todos son perfectos, pero son una opción alternativa poco a poco más posible a los componentes basados ​​en marcos.

Incluso si no desea prescindir de sus preferidos, los componentes web son compatibles Cuales Framework, y estas API van a ser compatibles a lo largo de los próximos años.

Cualquiera puede ver el fichero de elementos web listos para usar:

… ¡Pero redactar tu código es mucho más divertido!

Este tutorial da una introducción completa a los elementos web escritos sin un marco de JavaScript. Aprenderás qué son y cómo puedes personalizarlos para tu emprendimiento web. Necesita HTML5, CSS y JavaScript.

Introducción a los componentes web

Los elementos web son elementos HTML personalizados, como: El nombre debe integrar un guion para evitar enfrentamientos con los elementos admitidos oficialmente en las especificaciones HTML.

Debe especificar una clase ES2015 para supervisar el elemento. Se puede nombrar en cualquier sitio, pero HelloWorld es una práctica común. Debe prolongar la interfaz HTMLElement, que representa los atributos y métodos estándar de cada elemento HTML.

Comentario: Con Firefox, puede prolongar algunos elementos HTML, como HTMLPaposeElement, HTMLImageElement o HTMLButtonElement. Esto no es compatible con otros navegadores y es imposible utilizar para hacer una sombra -DOM.

Para hacer algo útil, una clase precisa un archivo llamado Llamar de vuelta () Llamado cuando se agrega un elemento a un archivo:

class HelloWorld extends HTMLElement 

  // connect component
  connectedCallback() 
    this.textContent="Hello World!";
  



En este ejemplo, el texto del elemento se establece en «Hello World».

Esta clase debe estar registrada con el servicio CustomElementRegistry para poder ser definida como un controlador para un factor específico:

customElements.define( 'hello-world', HelloWorld );

El navegador viene en este momento Elementos y tu Hola Planeta Categoría al cargar JavaScript (p. Ej. ).

¡Ahora tienes un producto personalizado!

Demostración de CodePen

Este componente se puede diseñar como cualquier otro elemento CSS:

hello-world 
  font-weight: bold;
  color: red;


Agregar atributos

Esta sección no es de ayuda ya que produce el mismo texto de todas formas. Como todos los otros elementos, tenemos la posibilidad de añadir atributos HTML:



Esto permite que el texto sea sustituido por «¡Hola Craig!» Usted tiene la posibilidad de. Agregar Constructor() Función asimismo Hola Planeta Una clase que se ejecuta cuando se crea cada objeto. Debería:

  1. Llama Increíble() Métodos de placa base HTMLElement y
  2. Realizar otras plataformas, en este caso especificamos un Apellido Atributos establecidos en «Planeta» por defecto:
class HelloWorld extends HTMLElement {

  constructor() 
    super();
    this.name="World";
  

  // more code...

El componente solo transmite Apellido Características estáticas Propiedades detectadas () Las características deberían devolver varias propiedades notables:

// component attributes
static get observedAttributes() 
  return ['name'];


uno atributoChangedCallback () En el momento en que un atributo se detalla en HTML o el atributo se altera utilizando JavaScript, tiene por nombre al procedimiento. Pasa el nombre del atributo, el valor anterior y el nuevo valor:

// attribute change
attributeChangedCallback(property, oldValue, newValue) 

  if (oldValue === newValue) return;
  this[ property ] = newValue;



Solo en este caso de ejemplo Apellido Las funciones se actualizarán para toda la vida, pero puede agregar mucho más funciones según sea preciso.

Tras todo, necesitas Llamar de vuelta () Método:

// connect component
connectedCallback() 

  this.textContent = `Hello $ this.name !`;



Demostración de CodePen

Enfoque del ciclo de vida

El navegador llama de manera automática a seis métodos durante la vida útil del ingrediente de red. La lista completa está aquí, si bien ya haya visto los primeros cuatro en el ejemplo:

Constructor()

Se llama en el momento en que el ingrediente se inicializa por primera vez; ha de ser llamado Excelente() También puede entablar valores predeterminados o efectuar otros procesos anteriores al desvanecimiento.

Características de detección estática ()

Devuelve un grupo de propiedades que corrobora el navegador.

atributoChangedCallback (propertyName, Valor antiguo, valor nuevo)

Lleva por nombre toda vez que cambia una característica detectada. Los definidos en formato HTML se pasan inmediatamente, pero JavaScript puede cambiarlos:

document.querySelector('hello-world').setAttribute('name', 'Everyone');

En este caso, es posible que sea necesario renderizar el método para que se active nuevamente.

Llamar de vuelta ()

Esta función lleva por nombre cuando la parte de la red se adjunta a una plantilla de objeto de archivo. Debe efectuar todas y cada una de las representaciones primordiales.

Devolución de llamada separada ()

Tiene por nombre en el momento en que la una parte de red se suprime de la plantilla de objeto de archivo. Puede ser útil en el momento en que precisa limpiar, por servirnos de un ejemplo, B. cuando elimina un espacio guardado o en el momento en que cancela solicitudes de Ajax.

Usar devolución de llamada ()

Esta función se llama en el momento en que se transfiere un ingrediente web desde un documento. a otro. ¡Encontrará su utilidad más allá de que he tratado de llevar a cabo frente en todas y cada una de las situaciones!

De qué manera interactúan los componentes web con otros elementos

Los componentes web dan una ocupación única que no hallará en un marco de JavaScript.

DOM de sombra

Si bien el ingrediente web creado previamente puede marchar, no está protegido contra interferencias externas y se puede modificar a través de CSS o JavaScript. Del mismo modo, los estilos que especifique para los componentes tienen la posibilidad de tener fugas y perjudicar a otros elementos.

Shadow DOM resuelve este problema de encapsulación agregando un DOM separado al componente de red y:

const shadow = this.attachShadow( mode: 'closed' );

El modelo puede ser:

  1. «Mente abierta» – JavaScript en una página externa puede utilizar Shadow DOM (usando Element.shadowRoot) o
  2. «Clausura» – Shadow DOM solo se puede usar en elementos web.

El Shadow DOM se puede utilizar como todos elemento DOM:

connectedCallback() 

  const shadow = this.attachShadow( mode: 'closed' );

  shadow.innerHTML = `
    

    

Hello $ this.name !

`;

El ingrediente en este momento muestra el texto «Hola»

Elementos y estilos. JavaScript o CSS no tienen la posibilidad de modificarlo fuera del componente, si bien ciertos estilos, como las fuentes y los colores, se heredan de la página porque no están precisamente establecidos.

Demostración de CodePen

El estilo utilizado con este componente web no puede afectar a otras partes de la página o incluso a otras secciones. Elemento.

Tenga en cuenta que CSS :host El selector puede entablar el estilo externo Elementos de los elementos de la red:

:host 
  transform: rotate(180deg);


Asimismo puede modificar el estilo que se usará si, por servirnos de un ejemplo, el elemento utiliza una categoría concreta :

:host(.rotate90) 
  transform: rotate(90deg);


Plantilla HTML

Para componentes web más complejos, especificar HTML en scripts puede ser poco práctico. Las plantillas le dejan concretar bloques HTML que los componentes web tienen la posibilidad de emplear en una página. Esto tiene varias virtudes:

  1. Puede personalizar el código HTML sin escribir una cadena en el código JavaScript.
  2. Puede personalizar componentes sin la necesidad de hacer una clase de JavaScript separada para cada tipo.
  3. Configurar HTML en HTML es mucho más simple y se puede editar en un servidor o cliente antes que se procese el componente.

El modelo se define en