Header Ads Widget

Ticker

6/recent/ticker-posts

Componentes web de Angular 9: elementos personalizados y Shadow DOM

 A lo largo de este tutorial, le enseñaremos a crear un componente web nativo utilizando la última versión de Angular 9.

¿Qué es un elemento personalizado y un DOM de sombra?

Parte de los componentes web estándar son elementos personalizados y DOM de sombra que proporcionan una forma de extender HTML creando sus etiquetas HTML personalizadas y encapsulando el árbol DOM y los estilos CSS utilizados dentro de sus componentes detrás de sus elementos personalizados.

Nota : Este tutorial está destinado a desarrolladores de Angular 9. Si desea construir un componente web usando JavaScript simple, necesita usar las API nativas para elementos personalizados y Shadow DOM. En lugar de las API nativas de JavaScript, usaremos Angular 9 Elements y la API ViewEncapsulation, que proporcionan una manera fácil de crear componentes web.

¿Cómo crear elementos personalizados con Angular 9?

Crearemos un formulario de contacto simple como un elemento personalizado reutilizable que puede incluir en cualquier aplicación de JavaScript para proporcionar una forma para que los usuarios se comuniquen con usted. Usaremos FormSpree , un backend de formulario que le permitirá conectar su formulario a su punto final y enviarle los envíos por correo electrónico. No se requiere P HP, Javascript o registrarse.

Gracias a la especificación de Elementos personalizados que se implementa en los navegadores modernos, los desarrolladores web pueden crear sus propias etiquetas HTML , mejorar y personalizar las etiquetas HTML existentes o crear componentes reutilizables que se pueden usar en JavaScript vanilla o en otras bibliotecas o marcos como Angular 9 , Reaccionar o Vue, etc.

Elementos personalizados es parte de los componentes web y simplemente proporciona una forma nativa y basada en estándares para crear componentes reutilizables usando JavaScript, HTML y CSS.

En este tutorial, seguiremos otro enfoque, crearemos un componente web pero con Angular 9 en lugar de JavaScript vanilla. Esto le permitirá usar sus componentes de Angular 9 como componentes web estándar y, como resultado, pueden reutilizarse no solo dentro de un proyecto de Angular 9 sino en cualquier aplicación de JavaScript.

Nota : La creación de su aplicación web con componentes web y elementos personalizados la hará preparada para el futuro, ya que utilizará API de navegador nativas estandarizadas que están garantizadas durante décadas y no dependen de un marco o biblioteca. Los sitios web populares de alto perfil como YouTube se construyen completamente con componentes web.

Usar Angular 9 para construir sus componentes web o etiquetas HTML personalizadas tiene algunos beneficios sobre el uso de JavaScript vanilla, ya que tendrá muchas características avanzadas como enlace de datos e inyección de dependencia para construir su componente y finalmente exportarlo como un componente web reutilizable.

Por lo tanto, tendrá las ventajas de ambos mundos, los patrones y características avanzados de Angular 9 y la usabilidad nativa de los componentes web en los navegadores web sin un tiempo de ejecución de marco.

Nota : Si viene de un lenguaje de programación orientada a objetos basado en clases como Java y desea crear componentes web, es posible que le resulte más fácil usar Angular 9 con TypeScript que usar JavaScript y las API nativas del navegador.

Componentes de Angular 9

En el corazón de Angular 9 está el concepto de componente.

Un componente de Angular 9 se puede definir como un fragmento de código que controla una parte de la interfaz de usuario. Puede tener entradas, salidas y eventos de ciclo de vida, pero solo puede ser interpretado por el tiempo de ejecución de Angular 9.

Afortunadamente para nosotros, Angular 9 también proporciona un paquete central llamado elementsque se puede usar para exportar fácilmente el componente Angular 9 a un componente web nativo o un elemento personalizado.

Definición de componentes web

Los componentes web son un conjunto de estándares de navegador nativos que incluyen:

  • Elementos personalizados para crear etiquetas HTML personalizadas,
  • Shadow DOM para agregar un árbol DOM aislado a un elemento, * - * Importaciones HTML para incluir documentos HTML, CSS o archivos JavaScript en otros documentos HTML.,
  • Plantillas HTML para crear parciales o fragmentos HTML dinámicos y reutilizables que pueden ser utilizados por JavaScript en tiempo de ejecución en cualquier momento durante la ejecución de la aplicación.

Como se dijo anteriormente, los componentes web y los elementos personalizados se pueden crear llamando a las API nativas del navegador, pero para crear aplicaciones complejas esto puede resultar intimidante ya que estas API son de bajo nivel. Como a los desarrolladores de software les encanta crear abstracciones, existen muchas herramientas que facilitan la creación de componentes web como Stencil, que se utilizó para crear los componentes de Ionic UI (componentes web), Polymer y también Angular Elements :

Los elementos angulares son componentes angulares empaquetados como elementos personalizados (también llamados componentes web), un estándar web para definir nuevos elementos HTML de una manera independiente del marco.

El @angular/elementspaquete proporciona un [createCustomElement](https://angular.io/api/elements/createCustomElement)()método que transforma la interfaz de componentes de Angular y la funcionalidad de detección de cambios en la API DOM incorporada.

Prerrequisitos

Comencemos con los requisitos previos de este tutorial:

  • Es necesario tener conocimientos prácticos de TypeScript y Angular ya que estamos usando Angular 9 para crear nuestro componente web,
  • También necesita tener Node.js y NPM instalados en su sistema junto con Angular 9 CLI. Simplemente puede ejecutar npm install -g @angular/clipara instalar la CLI.

Generando un proyecto con Angular 9 CLI

Abra una nueva terminal y ejecute el siguiente comando:

$ ng new angular-9-custom-element

Esto le preguntará si desea agregar enrutamiento angular. Responda con No y ¿Qué formato de hoja de estilo le gustaría usar? Mantengamos las cosas simples y escojamos CSS .

La CLI generará los archivos básicos e instalará las dependencias y tendrá un proyecto de Angular 9 listo para ser servido usando los siguientes comandos:

$ cd angular-9-custom-element
$ ng serve

Su aplicación web estará disponible en la dirección http: // localhost: 4200.

Agregar elementos angulares 9

Angular 9 Elements se encarga de transformar su (s) componente (s) de Angular 9 en elementos personalizados que se pueden usar para extender HTML con nuevas etiquetas sin saber nada sobre la API de bajo nivel.

Nota : No es necesario que sepa nada sobre la API de elementos personalizados para crear elementos personalizados y los usuarios de sus componentes no tienen que saber nada sobre Angular 9 para usar su elemento personalizado o componente web.

Ahora agreguemos Angular 9 Elements a nuestro proyecto. Abra una nueva terminal y ejecute el siguiente comando:

$ cd angular-9-custom-element
$ ng add @angular/elements

¿Cómo crear un componente Angular 9?

En Angular, puede crear un componente definiendo una clase de TypeScript y decorarlo con el @Componentdecorador, donde puede proporcionar los metadatos necesarios para su componente, como la plantilla HTML que se representará como la vista (y que necesitará crear) y las hojas de estilo que contienen los estilos.

También puede utilizar la CLI para generar un componente de barra-hueso. Vuelve a tu terminal y ejecuta el siguiente comando

$ ng generate component contactForm

Abra el src/app/contact-form/contact-form.component.tsarchivo, debe encontrar el siguiente código para un componente básico:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-contact-form',
  templateUrl: './contact-form.component.html',
  styleUrls: ['./contact-form.component.css']
})
export class ContactFormComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Abra el src/app/contact-form.component.htmlarchivo y agregue el siguiente código HTML:

<form action="https://formspree.io/techiediaries9@gmail.com" method="POST">
    <label for="name">Name</label>
    <input type="text" id="name" name="name" class="full-width" /><br />
    <label for="email">Email Address</label>
    <input type="email" id="email" name="_replyto" class="full-width" /><br />
    <label for="message">Message</label>
    <textarea name="message" id="message" cols="30" rows="10" class="full-width"></textarea><br />
    <input type="submit" value="Send" class="button" />
</form> 

A continuación, abra el src/app/contact-form.component.cssarchivo y los siguientes estilos:

form {
  margin:10% auto 0 auto;
  padding:30px;
  width:400px;
  height:auto;
  overflow:hidden;
  background:rgb(49, 16, 16);
  border-radius:10px;
  color: white;
}
form label {
  font-size:14px;
  cursor:pointer;
}
form label,
form input {
  float:left;
  clear:both;
}
form input {
  margin:15px 0;
  padding:15px 10px;
  width:100%;
  outline:none;
  border:1px solid #bbb;
  border-radius:20px;
  display:inline-block;
}
form textarea{
  float:left;
  clear:both;
  width:100%;
  outline:none;
  border:1px solid #bbb;
  border-radius:20px;
  display:inline-block;
}
input[type=submit] {
  padding:15px 50px;
  width:auto;
  background:rgb(49, 16, 16);;
  border:none;
  color:white;
  cursor:pointer;
  display:inline-block;
  float:right;
  clear:right;
}

Como no teníamos configuración de enrutamiento en nuestra aplicación, podemos invocar nuestro componente usando su selector.

Abra el src/app/app.component.htmlarchivo y agregue:

<app-contact-form></app-contact-form>

Esto nos permitirá probar nuestro componente dentro de la aplicación Angular.

Esta es una captura de pantalla de nuestro formulario:

Componente angular con formulario HTML

Encapsulación Angular 9 View y Shadow DOM

Shadow DOM es parte de los componentes web y nos permite encapsular un árbol DOM y estilos CSS detrás de otros elementos. Como resultado, nos permite aplicar estilos de ámbito a los elementos sin que se desangren y afecten los estilos de la página que los contiene. Puede adivinar por qué esto es útil en nuestro caso. Dado que nuestro componente puede ser reutilizable e incluido en el contexto de cualquier otra página, no queremos que los estilos CSS del componente de formulario en sí interfieran con los estilos de la aplicación de alojamiento.

Shadow DOM es parte de los componentes web y nos permite encapsular un árbol DOM y estilos CSS detrás de otros elementos. Como resultado, nos permite aplicar estilos de ámbito a los elementos sin que se desangren y afecten los estilos de la página que los contiene. Puede adivinar por qué esto es útil en nuestro caso. Dado que nuestro componente puede ser reutilizable e incluido en el contexto de cualquier otra página, no queremos que los estilos CSS del componente de formulario en sí interfieran con los estilos de la aplicación de alojamiento.

Shadow DOM es útil para crear aplicaciones basadas en componentes. Como tal, proporciona soluciones para problemas comunes en el desarrollo web:

  • DOM aislado que hace que el componente DOM sea autónomo,
  • CSS con ámbito: los estilos CSS del DOM en la sombra tienen un ámbito, es decir, los estilos no interfieren con la página web del host.

CSS con ámbito significa:

  • Los estilos CSS definidos en la página de host no se aplican afectan el aspecto de los elementos HTML en el componente web,
  • Además, los estilos CSS definidos dentro del componente están sujetos al componente y no afectan a los elementos HTML fuera del componente.

Angular 9 facilita la creación de un DOM de sombra y estilos de ámbito a través de la API ViewEncapsulation
Simplemente, abra el src/app/form-contact.component.tsarchivo y aplique la ShadowDomencapsulación al componente de la siguiente manera:

import { Component, OnInit, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-contact-form',
  templateUrl: './contact-form.component.html',
  styleUrls: ['./contact-form.component.css'],
  encapsulation: ViewEncapsulation.ShadowDom
})
export class ContactFormComponent implements OnInit {
  constructor() { }
  ngOnInit() {
  }
}

Los otros tipos de encapsulación son Ninguno, Emulado y Nativo.

Hágalo un elemento personalizado

En este punto, nuestro componente Angular 9 solo se puede usar dentro de un proyecto Angular 9, transformémoslo en un elemento personalizado para que podamos usarlo con JavaScript vanilla.

Abra el src/app.module.tsarchivo e importe las API InjectorcreateCustomElement:

import  { Injector} from '@angular/core';
import  { createCustomElement } from '@angular/elements';

A continuación, agregue ContactFormComponenta la bootstrapmatriz del módulo:

@NgModule({ 
  declarations: [
    AppComponent,
    ContactFormComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent , ContactFormComponent]
})
export class AppModule {

A continuación, inyecte Injectorcomo dependencia:

export class AppModule {
  constructor(private injector: Injector) {}
}

A continuación, invoque el createCustomElement()método para transformar el componente Angular 9 en un elemento personalizado:

export class AppModule {
  constructor(private injector: Injector) {
    const el = createCustomElement(ContactFormComponent, { injector });
    customElements.define('contact-form', el);
  }

Construyendo el elemento personalizado

Regrese a su terminal y ejecute el siguiente comando para compilar el proyecto para producción:

$ ng build --prod --output-hashing none

Esto generará una dist/angular-custom-elementcarpeta con un conjunto de archivos JavaScript:

  • runtime.js,
  • es2015-polyfills.js,
  • polyfills.js,
  • scripts.js,
  • main.js

Ahora, cada vez que necesitemos usar nuestro elemento personalizado, necesitaremos incluir todos los archivos JavaScript anteriores. Una mejor solución es concatenar todos estos archivos en un archivo JavaScript utilizando un script Node.js.

En su proyecto de Angular 9, instalemos los módulos concatfs-extra:

$ npm install --save-dev concat fs-extra

A continuación, cree un concatenate.jsarchivo y agregue el siguiente código:

const fs = require('fs-extra');
const concat = require('concat');

concatenate = async () =>{
    const files = [
        './dist/angular-9-custom-element/runtime.js',
        './dist/angular-9-custom-element/polyfills.js',
        './dist/angular-9-custom-element/es2015-polyfills.js',
        './dist/angular-9-custom-element/scripts.js',
        './dist/angular-9-custom-element/main.js'
      ];

      await fs.ensureDir('output');
      await concat(files, 'output/contact-form.js');
}
concatenate();

Estamos agregando las rutas relativas de nuestros archivos JavaScript en la filesmatriz, así que asegúrese de poner las rutas correctas en su caso.

Ahora, agreguemos un script al package.jsonarchivo para ejecutar este archivo después de construir el proyecto:

  "scripts": {
    "build:component": "ng build --prod --output-hashing none && node concatenate.js",  
  },

En su terminal, ejecute el siguiente comando para construir el proyecto Angular 9 y concatenar los archivos en un solo output/contact-form.jsarchivo:

$ npm run build:component

Probando nuestro elemento personalizado con JavaScript

Ahora, probemos nuestro elemento personalizado usando JavaScript vanilla.

Creemos un nuevo index.htmlarchivo dentro de la carpeta de salida donde se construye nuestro elemento personalizado y agreguemos el siguiente código:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Testing our custom element</title>
  <base href="/">
</head>
<body>
  <contact-form></contact-form>

  <script type="text/javascript" src="contact-form.js"></script>
</body>
</html>

Incluimos el elemento personalizado usando una <script>etiqueta e invocamos el componente usando la <contact-form>etiqueta.

Ahora, usemos algo como http-serverservir este archivo localmente:

$ npm install http-server -g 

A continuación, asegúrese de estar dentro de la carpeta donde ha creado el index.htmlarchivo y ejecute el siguiente comando:

$ cd output
$ http-server 

Conclusión

Los componentes web con sus elementos personalizados, shadow dom, importaciones html y plantillas html son el futuro de la plataforma web y cómo crearemos aplicaciones en el futuro. Al combinar estas API con marcos potentes como Angular 9, podemos crear aplicaciones con componentes reutilizables que estén preparados para el futuro sin temor a que las tecnologías utilizadas se conviertan en heredadas.

Angular 9 facilita el trabajo con elementos personalizados y DOM de sombra al proporcionar una API fácil de usar además de las API de bajo nivel como el paquete de elementos Angular 9 y la ViewEncapsulationAPI.

En este tutorial, hemos visto un ejemplo de Angular 9 en el que hemos creado un formulario de contacto reutilizable como componente angular y lo hemos exportado como un elemento personalizado que se puede utilizar con JavaScript vanilla.


Publicar un comentario

0 Comentarios