Custom Elements (HTML)

Los Custom Elements (Etiquetas HTML personalizadas) son una de las características de WebComponents mediante la cuál podemos crear nuestras propias etiquetas HTML, dotándolos de su propio marcado HTML, funcionalidad y/o estilo CSS.

Nombres de las etiquetas HTML

El estándar de HTML5 define que las etiquetas HTML oficiales deben estar formadas por una sola palabra, mientras que 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 nuestra.

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.

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, 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: black;
  color: white;
}

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

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

¿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>

Obsera 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).

Con esto, ya sabemos crear custom elements y darle estilo. Sin embargo, necesitamos mejorarlo con Javascript para darle funcionalidad, que es lo que aprenderemos en el próximo artículo.