# Comenzando con Webcomponents

Gracias por estar aquí e iniciarte con Atomico. Hablemos un poco de lo que hoy ofrece atomico:

1. **Agilidad de desarrollo**, el enfoque funcional de Atomico simplifica el código en todas las etapas de desarrollo.
2. **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.
3. **Realmente rapido**, Atomico posee un [buen performance](https://twitter.com/atomicojs/status/1391775734641745929) en el browser y una experiencia de desarrollo ágil.

Entendamos el como luce un webcomponent creado con Atomico:

{% code title="MyComponent.jsx" lineNumbers="true" %}

```tsx
// 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));
```

{% endcode %}

Analicemos el código por partes...

### 1.0 Importaciónes

```tsx
import { c, css } from "atomico";
```

¿Qué hemos importado?

1. `c`: Función que transforma el componente funcional en un customElement estándar.
2. `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

{% code title="MyComponent.tsx - Linea: 7 a 9" %}

```tsx
// Definiendo el renderizado del componente
({ message }) => {
    return <host shadowDom>{message}</host>;
}
```

{% endcode %}

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:

1. **índice**: Nombre de la propiedad y atributo.
2. **Valor**: tipo de la prop.

{% code title="MyComponent.tsx - Lina: 12 a 14" %}

```tsx
// Defining Component Properties(props) and Attributes
props: {
  message: String,
},
```

{% endcode %}

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`:

{% code title="MyComponent.tsx - Linea: 16 a 19" %}

```tsx
styles: css`
  :host {
    font-size: 30px;
  }
`,
```

{% endcode %}

`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

{% code title="MyComponent.tsx - Linea: 25" %}

```tsx
// Web Component Registration and Definition
customElements.define("my-component", MyComponent);
```

{% endcode %}

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

{% embed url="<https://webcomponents.dev/edit/collection/wuKH7azM3kT3jqKv9ZV9/7dNVyEXrCpmpKF9NXAAY/src/index.jsx>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://atomico.gitbook.io/doc/espanol/comenzando.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.