Custom Elements (HTML)

Crear un custom element

La forma más básica de crear una etiqueta personalizada HTML (custom element) es simplemente escribir la etiqueta HTML personalizada. Además, también podemos darle algo de estilo, haciendo referencia al nombre de la etiqueta. En nuestro caso, la hemos llamado app-element:

<app-element>
  Contenido de nuestro elemento personalizado
</app-element>

app-element {
  background: indigo;
  color: white;
  padding: 5px 15px;
}

Si lo único que queríamos era crear un componente y darle estilo... ¡Ya lo tenemos! Así de fácil.

Sin embargo, vamos a profundizar un poco. Observa que el navegador, por defecto, trata al custom element como si fuera una etiqueta similar a un <span>, es decir, un elemento en línea, por lo que si le damos un ancho o un alto, nos ignorará y no cambiará de tamaño.

Podemos añadir un display diferente y darle unas dimensiones para observar cambios:

app-element {
  display: block;
  width: 125px;
  height: 125px;
  padding: 5px;
  background: deeppink;
  color: white;
}

<app-element>
  Contenido de nuestro elemento personalizado
</app-element>

No obstante, respecto a todo el tema de los estilos CSS profundizaremos más adelante.

Nombres de las etiquetas HTML

El estándar de HTML5 define dos sencillas reglas:

• 1️⃣ Las etiquetas HTML oficiales deben estar formadas por una sola palabra.
• 2️⃣ Los custom elements (nuestras propias etiquetas HTML) deben estar formadas de al menos 2 palabras, separadas por un guión.

De esta forma, protegemos nuestras páginas o aplicaciones web para que, si en el futuro se añade una nueva etiqueta HTML estándar, no coincida con el mismo nombre que alguna de las nuestras.

Veamos algunos ejemplos:

Así pues, un custom element básico y sencillo, podría definirse de la siguiente forma:

<!-- ✔️ Sencillo ejemplo de una etiqueta HTML propia (custom element) -->
<app-element></app-element>

<!-- ❌ Ejemplo incorrecto de custom element (no tiene guión) -->
<element></element>

Aprovechando la necesidad de utilizar dos palabras en un componente separadas por un guión, una buena práctica suele ser utilizar la primera palabra como «namespace» del componente. Es decir, utilizar el nombre de la funcionalidad, librería o aplicación, y así evitar posibles colisiones con otros elementos de terceros con nombre similar. Si no se te ocurre ninguno, puedes usar el prefijo base.

¿Es realmente un Custom Element?

Centrémonos ahora en comprobar que, efectivamente, no he mentido y hay que dar un buen nombre a los custom elements. Vamos a localizar dos elementos HTML (uno con nombre correcto y otro incorrecto) y vamos a comprobar que tipo de elemento nos devuelve:

<app-element></app-element>
<element></element>

<script>
const appElement = document.querySelector("app-element");
const element = document.querySelector("element");

console.log("<app-element>: ", appElement.constructor.name);  // HTMLElement
console.log("<element>: ", element.constructor.name);         // HTMLUnkownElement
</script>

Observa que hemos localizado ambas etiquetas HTML y mostrado el nombre del constructor para saber en que tipo de elemento HTML está basado:

• En el caso de <app-element> se trata efectivamente de un custom element, ya que está basado en HTMLElement, el tipo de dato base de cualquier etiqueta HTML.

• En el caso de <element> nos dice que el tipo de dato es HTMLUnknownElement, ya que al no tener guión considera que es un elemento HTML estándar, pero el navegador desconoce de que elemento se trata (es desconocido).