[Sergio Iglesias](https://sergioiglesias.net) · Blog sobre Joomla

# Custom Elements en Joomla: creando componentes de UI nativos y reutilizables

[ Añadir a fuentes preferidas ](https://www.google.com/preferences/source?q=sergioiglesias.net)   22 Julio 2026    [Tips Joomla](https://sergioiglesias.net/blog/joomla)   3 - 5 minutos    Visitas: 282  -
- [ Desarrollo Joomla ](https://sergioiglesias.net/etiquetas/desarrollo-joomla)
- [ Plantillas Joomla ](https://sergioiglesias.net/etiquetas/plantillas-joomla)

  ![](https://sergioiglesias.net/images/blog/tips/crear-custom-elements-joomla.webp) Si llevas tiempo desarrollando con Joomla, seguro que esta escena te resulta familiar: el mismo botón repetido en módulos, vistas, overrides, landing pages… la misma tarjeta copiada una y otra vez "por si acaso".

Y claro, al tercer cambio de diseño empieza el festival de buscar y reemplazar.

La buena noticia es que en Joomla existe una forma mucho más elegante, moderna y eficiente de construir interfaces reutilizables: **Custom Elements**, basados en el estándar de **Web Components**.

Sí, componentes reales… pero sin depender de React, Vue.js o cualquier otra capa extra.

Y lo mejor: el propio núcleo de Joomla ya trabaja con esta filosofía. Así que no estamos inventando nada raro… estamos jugando en la misma liga que el core.

## ¿Qué son exactamente los Custom Elements?

Los **Custom Elements** permiten crear nuestras propias etiquetas HTML.

En lugar de esto:

 ```
<div class="btn btn-primary btn-lg shadow"><br></br>  Comprar ahora<br></br></div>
```

Podemos escribir algo mucho más limpio:

 ```
<joomla-button variant="primary"><br></br>  Comprar ahora<br></br></joomla-button>
```

O incluso crear componentes totalmente personalizados:

 ```
<mi-tarjeta-precio<br></br>  titulo="Plan profesional"<br></br>  precio="49€"<br></br>  destacado="true"><br></br></mi-tarjeta-precio>
```

Solo con verlo, ya sabes qué hace cada bloque.

Y eso, cuando tu proyecto crece, vale oro.

## ¿Por qué usar Custom Elements en Joomla?

### 1. Encapsulación real: adiós a los conflictos de CSS y JavaScript

Uno de los mayores dolores de cabeza en cualquier proyecto web aparece cuando un estilo rompe otro.

Ese típico:

"¿Quién demonios ha cambiado el botón del formulario?"

Con los Custom Elements, el CSS y el JavaScript del componente viven encapsulados.

Eso significa:

- Sin fugas de estilos
- Sin clases globales absurdas
- Sin efectos secundarios misteriosos
- Sin pelearte con !important

Tu componente vive en su propio universo.

Y sinceramente… se duerme mucho mejor.

### 2. HTML mucho más semántico y legible

Mira estas dos estructuras:

#### Opción clásica:

 ```
<div class="card card-featured card-shadow"><br></br>   ...<br></br></div>
```

#### Opción moderna:

 ```
<pricing-card><br></br>   ...<br></br></pricing-card>
```

No hace falta interpretar nada.

El código se explica solo.

Esto mejora:

- mantenimiento
- escalabilidad
- onboarding de otros desarrolladores
- velocidad de desarrollo

Y sí… también tu salud mental.

### 3. Reutilización extrema

Creas un componente una sola vez.

Lo reutilizas:

- en artículos
- en módulos
- en layouts
- en overrides
- en componentes personalizados
- incluso en plugins

Cambias una línea…

Y se actualiza en toda la web.

Eso no es productividad.

Eso es magia… con estándares.

### 4. Independencia total de frameworks

Muchos desarrolladores creen que para crear UI moderna necesitas:

- React
- Vue.js
- Angular

Pero el navegador moderno ya trae todo eso resuelto.

Los **Web Components** funcionan de forma nativa.

Sin build.
Sin dependencias.
Sin npm.
Sin 200 MB de node\_modules.

Solo navegador y código limpio.

Y en proyectos Joomla… esto tiene muchísimo sentido.

## Cómo crear tu primer Custom Element en Joomla

Vamos a un ejemplo real.

### Paso 1: crear el componente JavaScript

 ```
class JoomlaButton extends HTMLElement {

    connectedCallback() {

        const texto = this.innerHTML;

        this.innerHTML = `<button class="btn-custom">
                ${texto}
        </button>`;
    }
}

customElements.define(
    'joomla-button',
    JoomlaButton
);
```

### Paso 2: cargarlo en tu plantilla

Desde tu template de Joomla:

 ```
use Joomla\CMS\Factory;

$wa = Factory::getApplication()
    ->getDocument()
    ->getWebAssetManager();

$wa->registerAndUseScript(
    'custom-elements',
    'media/templates/site/tu_template/js/components.js'
);
```

### Paso 3: usarlo en cualquier parte

Ahora simplemente:

 ```
<joomla-button><br></br>   Comprar ahora<br></br></joomla-button>
```

Y listo.

Ya tienes un componente reutilizable funcionando en toda tu instalación.

## Shadow DOM: el superpoder oculto

Si quieres encapsulación total, necesitas conocer **Shadow DOM**.

Con él:

- tus estilos no salen
- estilos externos no entran
- JavaScript externo no rompe tu UI

Ejemplo:

 ```
class PricingCard extends HTMLElement {

    connectedCallback() {

        const shadow = this.attachShadow({
            mode: 'open'
        });

        shadow.innerHTML = `
<style><br></br>.card {<br></br>border-radius:16px;<br></br>padding:20px;<br></br>}<br></br></style> <div class="card"><br></br><slot></slot><br></br></div>

        `;
    }
}
```

Esto cambia completamente la forma de maquetar en Joomla.

## Casos reales donde brillan en Joomla

### Botones globales

 ```
<joomla-button><br></br>  Contactar<br></br></joomla-button>
```

### Tarjetas de servicios

 ```
<service-card><br></br></service-card>
```

### Boxes de precios

 ```
<pricing-card><br></br></pricing-card>
```

### Alertas personalizadas

 ```
<site-alert type="success"><br></br></site-alert>
```

### FAQs interactivas

 ```
<faq-accordion><br></br></faq-accordion>
```

## ¿Joomla ya usa esta filosofía?

Sí.

El núcleo de Joomla lleva tiempo apostando por JavaScript moderno y componentes desacoplados.

Así que adoptar **Custom Elements** en tus desarrollos no solo es buena práctica…

Es alinearte con hacia dónde está evolucionando Joomla.

Y eso, estratégicamente, siempre suma.

## Esto va a cambiar cómo desarrollamos en Joomla

Durante años hemos abusado de:

- snippets repetidos
- layouts duplicados
- overrides gigantes
- frameworks innecesarios

Los **Custom Elements** cambian las reglas.

Menos código.
Más claridad.
Más reutilización.
Más mantenimiento a largo plazo.

Y siendo honestos…

Una vez empiezas a trabajar así…

volver al copy-paste da casi alergia.

Los **Custom Elements en Joomla** no son una moda.

Son probablemente una de las formas más inteligentes de construir interfaces modernas aprovechando lo que ya ofrecen los navegadores.

Si estás trabajando con Joomla y todavía no los has probado…

Ahora mismo tienes una ventaja competitiva delante.

La pregunta no es si deberías empezar.

La pregunta es:

**¿Cuántos componentes repetidos tienes ahora mismo esperando ser convertidos?**

[ Añadir a fuentes preferidas ](https://www.google.com/preferences/source?q=sergioiglesias.net)Gratuito · Primer paso recomendado

### ¿No sabes bien en qué estado

está tu web Joomla?

Antes de decidir si hay que arreglar, migrar o mantener, conviene saber qué está pasando. Reviso el estado de tu web — versión de Joomla, extensiones y lo que se pueda ver — y te digo qué conviene hacer y en qué orden.

Versión de Joomla y ruta de actualización Estado de extensiones Plan de acción con recomendaciones Informe por email + HTML

[ Solicitar revisión gratuita sin compromiso ](https://sergioiglesias.net/revision-joomla-gratis)Respuesta en 24–48 h laborables

[![Sergio Iglesias](https://sergioiglesias.net/images/sergiois-joomla-web.png)](https://sergioiglesias.net/sobre-mi)##### Consultor Web Joomla Senior

Soy [Sergio Iglesias](https://sergioiglesias.net/sobre-mi). Ayudo a empresas, instituciones y profesionales a convertir su web en una herramienta real de negocio: segura, escalable y fácil de gestionar. Soy especialista en migraciones complejas de Joomla sin pérdida de datos, desarrollo de extensiones y plantillas a medida y ofrezco mantenimiento y evolución de tu CMS.

[](https://x.com/sergiois "Sergio Iglesias en X") [](https://www.linkedin.com/in/sergiois "Sergio Iglesias en Linkedin") [](https://github.com/sergiois "Sergio Iglesias en Github") [](https://sergiois.github.io/ "Extensiones Joomla de Sergio Iglesias")

### Suscríbete a mi newsletter

¿Te ha gustado el artículo? Suscríbete a mi newsletter y recibe contenido exclusivo.
Podrás hacer gratis un **Curso de desarrollo de plantillas Joomla**.

[Quiero apuntarme!](https://sergioiglesias.net/newsletter)

###  No hay comentarios

###  Deja tu comentario

 En respuesta a Some User

 Nombre \*

 Dirección de email \*

 Texto del comentario \*

 Doy mi consentimiento para que mi información personal sea recopilada y procesada por este sitio para aceptar y mostrar mi comentario, así como para notificarme sobre las respuestas a él según la [Declaración de privacidad](https://sergioiglesias.net/politica-privacidad) del sitio. \*