Cómo construir un componente web usando Stencil.js

Los componentes web son un conjunto de tecnologías que le permiten crear elementos reutilizables y reutilizarlos en diferentes aplicaciones web.

Stencil.js es un compilador que genera componentes web que son compatibles con todos los navegadores modernos. Proporciona herramientas y API para ayudarlo a crear componentes web rápidos, eficientes y escalables.

Primeros pasos con Stencil.js

Para comenzar con Stencil.js, primero debe inicializarlo en su computadora.

Haga esto ejecutando el siguiente comando en su terminal node.js:

plantilla de inicio npm

Después de ejecutar el comando, aparecerá un mensaje en su pantalla para que seleccione con qué proyecto desea comenzar:

Para continuar, elija la opción de componente, ingrese el nombre de su proyecto y confirme su selección:

A continuación, cambie al directorio de su proyecto e instale sus dependencias ejecutando estos comandos:

cd primer proyecto de plantilla
instalar npm

Creación de un nuevo componente web

Para crear un nuevo componente web en Stencil.js, cree una ruta de carpeta como origen/componentes. La carpeta de componentes contendrá un archivo TypeScript con el nombre de su componente, como Stencil.js utiliza el lenguaje TypeScript y JSX para el desarrollo de componentes. La carpeta también contendrá un archivo CSS que contiene el estilo de su componente.

Por ejemplo, si desea crear un componente llamado "mi-botón", cree un archivo llamado mi-boton.tsx y un archivo CSS llamado mi-boton.css. En el mi-boton.tsx archivo, defina su componente usando la API Stencil.js:

importar { Componente, h } de'@plantilla/núcleo';
@Componente({
 etiqueta: 'mi-botón',
 URL de estilo: 'mi-boton.css',
 sombra: verdadero,
})
exportarclasemiboton{
 prestar() {
devolver (
Haz clic en mí</button>
 );
 }
}

Este código importa el Componente y h funciones de Stencil.js. El Componente la función define el componente, mientras que la h función crea su marcado usando HTML.

Defina su componente usando el @Componente decorador, que toma un objeto con tres propiedades: etiqueta, URL de estilo, y sombra.

El etiqueta La propiedad contiene el nombre de la etiqueta del componente. El URL de estilo La propiedad especifica el archivo CSS para diseñar el elemento personalizado. Por último, el sombra property es un valor booleano que indica si el componente usará Shadow DOM para encapsular los estilos y el comportamiento del elemento personalizado. En el método de representación, crea un elemento de botón.

Además de URL de estilo propiedad, puede usar dos propiedades más para diseñar su componente: estilo y URL de estilo.

El estilo La propiedad define estilos en línea para el componente. Toma un valor de cadena que representa los estilos CSS para el componente:

importar { Componente, h } de'@plantilla/núcleo';
@Componente({
 etiqueta: 'mi-botón',
 estilo: `
 botón {
 relleno: 1movimiento rápido del ojo 0.5movimiento rápido del ojo;
 borde-radio: 12píxeles;
 familia de fuentes: cursiva;
 borde: ninguno;
 color: #e2e2e2;
 color de fondo: #333333;
 fuente-peso: negrita;
 }
`,
 sombra: verdadero,
})
exportarclasemiboton{
 prestar() {
devolver (
Haz clic en mí</button>
 );
 }
}

El URL de estilo La propiedad especifica varios archivos CSS externos para diseñar el componente. Toma una matriz de valores de cadena que representan las rutas a los archivos CSS:

importar { Componente, h } de'@plantilla/núcleo';
@Componente({
 etiqueta: 'mi-botón',
 URL de estilo: ['mi-boton.css', 'otro-boton.css'],
 sombra: verdadero,
})
exportarclasemiboton{
 prestar() {
devolver (
Haz clic en mí</button>
 );
 }
}

Representación del componente web

Una vez que haya creado su componente web, puede representarlo en un archivo HTML agregando una etiqueta de elemento personalizada. Así es como puede incluir el componente my-button:

html>
<htmldirectorio="ltr"idioma="es">
<cabeza>
<metajuego de caracteres="utf-8" />
<metanombre="ventana de visualización"contenido="ancho = ancho del dispositivo, escala inicial = 1,0, escala mínima = 1,0, escala máxima = 5,0" />
<enlacehref=""real="hoja de estilo">
<título>Inicio de componente de plantillatítulo>
<guiontipo="módulo"origen="/build/first-stencil-project.esm.js">guion>
<guionsinmóduloorigen="/build/first-stencil-project.js">guion>
cabeza>
<cuerpo>
<mi-boton>mi-boton>
cuerpo>
html>

Ahora puede crear componentes web con Stencil.js

Stencil.js es una poderosa herramienta para crear componentes web rápidos, eficientes y escalables. Su API y herramientas facilitan la creación y administración de componentes web, y su compatibilidad con todos los navegadores modernos garantiza que sus componentes funcionarán bien en diferentes aplicaciones web.

A medida que los componentes web se vuelven cada vez más populares, Stencil.js es un marco que debe tener en cuenta al crear elementos reutilizables para la web.