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
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.
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:
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 ).
¡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:
- Llama Increíble() Métodos de placa base HTMLElement y
- 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:
- "Mente abierta" - JavaScript en una página externa puede utilizar Shadow DOM (usando Element.shadowRoot) o
- "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.
Tenga en cuenta que CSS :host El selector puede entablar el estilo externo
: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:
- Puede personalizar el código HTML sin escribir una cadena en el código JavaScript.
- Puede personalizar componentes sin la necesidad de hacer una clase de JavaScript separada para cada tipo.
- 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 Es conveniente agregar y detallar una etiqueta para que pueda realizar referencia a ella en una clase de componente. En este caso de ejemplo, se expone el mensaje "Hola" para tres canciones:
Una clase de ingrediente de red puede emplear esta plantilla, recobrar su contenido y clonar elementos para asegurarse de que cree un fragmento DOM único en cualquier sitio:
const template = document.getElementById('hello-world').content.cloneNode(true);El DOM se puede modificar de manera directa y añadir al Shadow DOM:
connectedCallback()
const
shadow = this.attachShadow( mode: 'closed' ),
template = document.getElementById('hello-world').content.cloneNode(true),
hwMsg = `Hello $ this.name `;
Array.from( template.querySelectorAll('.hw-text') )
.forEach( n => n.textContent = hwMsg );
shadow.append( template );
Demostración de CodePen
Rincón modelo
Place te deja editar la plantilla aun si deseas la tuya
Sombra de título en el DOM. Para entrar el código, siga estos pasos:
Hello Default!
Hello Default!
(Nota Deposito de monedas Peculiaridades. )
Puede agregar otros elementos, como: B. segundo párrafo:
Hello Default!
This text will become part of the component.
En este momento puede habilitar puntos de partida en su modelo:
El atributo de localización del elemento se establece en "msgtext" (
) Añadido allí
Hello Default!
This text will become part of the component.
Hello Default!
This text will become part of the component.
De todos modos, no es tan simple
connectedCallback()
const
shadow = this.attachShadow( mode: 'closed' ),
hwMsg = `Hello $ this.name `;
// append shadow DOM
shadow.append(
document.getElementById('hello-world').content.cloneNode(true)
);
// find all slots with a hw-text class
Array.from( shadow.querySelectorAll('slot.hw-text') )
// update first assignedNode in slot
.forEach( n => n.assignedNodes()[0].textContent = hwMsg );
Demostración de CodePen
Además de esto, no puede formatear un elemento añadido de manera directa, incluso si puede encontrar una ubicación concreta en el ingrediente de red:
La localización de la plantilla es un poco excepcional, pero una virtud es que muestra su contenido cuando no se puede realizar JavaScript. Este código exhibe los títulos y canciones predeterminados que solo se reemplazarán si la clase de componente de red marcha apropiadamente:
Hello Default!
This text will become part of the component.
En consecuencia, puede poder algún género de optimización progresiva, aun si es únicamente una "Precisas JavaScript" ¡Información!
DOM de sombra informativa
En el ejemplo previo, se utiliza JavaScript para crear el shadow -DOM. Esta todavía es la única opción, pero se está construyendo un DOM declarativo de sombra en fase de prueba para Google chrome. Esto permite la representación del lado del servidor e impide cambios de diseño o contenido parpadeante sin estilo.
El analizador HTML identifica el próximo código que crea un shadow -DOM que es idéntico al shadow -DOM que creó en la sección anterior (debe actualizar el mensaje según sea necesario):
Hello Default!
This text will become part of the component.
Esta función no está libre en ningún navegador y no hay garantía de que acceda a Firefox o Safari. Para obtener más información sobre el DOM declarativo de sombra, consulte polyfill es simple, pero tenga presente que la implementación está sujeta a cambios.
Eventos de Shadow DOM
Exactamente la misma con el formato DOM de la página, el componente de red puede asociar eventos con cualquier elemento shadow -DOM, como:
shadow.addEventListener('clic', y también =>
// do something
);
Si no deja de distribuir, el evento se mandará a la página DOM, pero el evento se redirigirá. Entonces parece ser su producto personalizado, no el producto que contiene.
Todos y cada uno de los componentes web que cree son compatibles con todos y cada uno de los marcos de JavaScript; ninguno de ellos conoce o se preocupa por los elementos HTML: el suyo
custom-elements-everywhere.com da una lista de marcos y comentarios para componentes de red. La mayor parte son completamente compatibles, aunque React.js tiene ciertos retos. Puede ser usado
import React from 'react';
import ReactDOM from 'react-dom';
import from './hello-world.js';
function MyPage()
return (
<>
…pero:
- React solo puede pasar tipos de datos primitivos a atributos HTML (sin matrices u elementos)
- React no puede escuchar acontecimientos de componentes de red, con lo que debe conectar de forma manual su propio controlador.
Críticas y inconvenientes del componente de red
Los elementos de la red se mejoraron mucho, pero algunos aspectos pueden ser difíciles de administrar.
Modelado de contrariedad
El diseño de elementos de red puede ser un desafío, en especial si quiere cubrir una variedad de estilos. Existen muchas resoluciones:
- Evite el uso de la sombra -DOM. Puede pegar contenido de manera directa en un factor personalizado, aun si algún otro JavaScript puede modificarlo de forma accidental o maliciosa.
- utilizar
:hostsimpático. Como hemos visto previamente, la división en zonas CSS puede utilizar ciertos estilos cuando se aplica una clase a un elemento personalizado. - Ver propiedades CSS adaptadas (variables). Los atributos personalizados están socios con el ingrediente web, o sea, cuando utiliza su elemento
var(--my-color), Puedes alquilar--my-colorEn el envase exterior (p. Ej.:root), esta utilizado. - Utilice la parte sombreada. El modificador new :: part () puede establecer el estilo de los componentes internos con atributos secundarios, a entender
hello-world::part(heading). - Preocúpate por múltiples estilos. Puede guardarlos como atributos pasados
`; // monitor input values shadow.querySelector('input').addEventListener('input', y también => this.setValue(y también.objetivo.value); );Con este ingrediente web, ahora puede hacer un formulario HTML que se parezca a otros campos de formulario:
Marcha, pero es imposible negar que se siente un poco enigmático.
Vea la demostración en CodePen
Para obtener mucho más información, consulte este producto sobre controladores de formulario más potentes.
Generalizar
A medida que el espacio y la utilidad de los marcos de JavaScript siguen creciendo, Web Components se esmera por lograr la coherencia y la aceptación. Si viene de una red React, Vue o Angular, los componentes de la red tienen la posibilidad de parecer complejos y engorrosos, en especial si carecen de funciones como el enlace de datos y la gestión del espacio.
Algunos inconvenientes tienen que resolverse, pero el futuro de los componentes web es refulgente. Son independientes del marco, rápidos y rápidos, y pueden efectuar funciones que no se tienen la posibilidad de conseguir solo con JavaScript.
Hace diez años, realmente pocas personas consideraban un portal de internet sin jQuery, pero los fabricantes de navegadores se han hecho cargo de enormes partes y han añadido opciones locales (como querySelector). Lo mismo sucede con los marcos de JavaScript, y los componentes web son el paso inicial preliminar.
¿Tiene preguntas sobre la utilización de elementos de red? ¡Discutámoslo en la sección de comentarios!
Ahorre tiempo, dinero y maximice el rendimiento del ubicación:
- Asistencia instantánea de especialistas en hosting de WordPress, 24 horas al día, 7 días a la semana.
- Integración de Cloudflare.
- La audiencia global llega a 28 centros de datos.
- Utilice la supervisión dentro del rendimiento de las aplicaciones para mejorar.
Todo lo mencionado y mucho más en un solo plan sin contratos en un largo plazo, asistencia de inmigración y una garantía de devolución de dinero de 30 días. Consulte los planes o hable con un representante de ventas para hallar un plan que ande para usted.
Deja una respuesta