🚀Comenzando con Webcomponents
Esta guía conocerás lo esencial para comenzar a desarrollar webcomponents con Atomico
Gracias por estar aquí e iniciarte con Atomico. Hablemos un poco de lo que hoy ofrece atomico:
Agilidad de desarrollo, el enfoque funcional de Atomico simplifica el código en todas las etapas de desarrollo.
Ligero por dentro y por fuera, Atomico te permite crear un componente con menos código y con un bajo impacto de dependencias 3kb Aproximadamente.
Realmente rapido, Atomico posee un buen performance en el browser y una experiencia de desarrollo ágil.
Entendamos el como luce un webcomponent creado con Atomico:
// Importaciones
import { c, css } from "atomico";
// Creando nuestro webcomponents: Definiendo el customElement
export const MyComponent = c(
// Definiendo el renderizado del componente
({ message }) => {
return <host shadowDom>{message}</host>;
},
{
// Definiendo propiedades(props) y atributos
props: {
message: String,
},
// Definiendo estilo css encapsulado
styles: css`
:host {
font-size: 30px;
}
`,
}
);
// Registro del custom tag del Web Component
customElements.define("my-component", c(component));
Analicemos el código por partes...
1.0 Importaciónes
import { c, css } from "atomico";
¿Qué hemos importado?
c
: Función que transforma el componente funcional en un customElement estándar.css
: Función que permite crear el CSSStyleSheet(CSS) para nuestro componente siempre y cuando este declare el shadowDom.
2.0 Creando nuestro webcomponents: Definiendo el customElement
2.1. Definiendo el renderizado del componente
// Definiendo el renderizado del componente
({ message }) => {
return <host shadowDom>{message}</host>;
}
Nuestra función recibe todas las props(Propiedades y Atributos) declaradas en props
(linea 12) la función declara toda la lógica y plantilla del webcomponent. Una regla importante dentro de Atomico es "todo componente creado con Atomico debe siempre retornar el tag <host>
".
2.2 Definiendo propiedades(props) y atributos
Atomico detecta las prop(Propiedades y Atributos) del componente gracias a la asociación del objeto props, esto mediante el uso de índices y valores te permite definir:
índice: Nombre de la propiedad y atributo.
Valor: tipo de la prop.
// Defining Component Properties(props) and Attributes
props: {
message: String,
},
Del ejemplo podemos inferir que Atomico creará en nuestro webcomponente una propiedad y atributo llamada mensaje y esta solo puede recibir valores del tipo String.
2.3 Definiendo estilo css encapsulado
Atomico detecta los estilos estáticos de tu componente gracias a la asociación de la propiedad styles
:
styles: css`
:host {
font-size: 30px;
}
`,
styles
acepta valores CSSStyleSheet(CSS) de forma individual o en lista, el retorno de la función css
es un CSSStyleSheet estándar, por lo que puede ser compartido fuera de Atomico.
3.0 Registro del custom tag del Web Component
// Web Component Registration and Definition
customElements.define("my-component", MyComponent);
Para crear nuestro customElement estándar deberemos entregar nuestro componente funcional a la función c
del módulo de Atomico, la función c
generará como retorno un customElement que puede ser definido o extendido.
Ejemplo
Last updated
Was this helpful?