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">
Comprar ahora
</div>Podemos escribir algo mucho más limpio:
<joomla-button variant="primary">
Comprar ahora
</joomla-button>O incluso crear componentes totalmente personalizados:
<mi-tarjeta-precio
titulo="Plan profesional"
precio="49€"
destacado="true">
</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">
...
</div>Opción moderna:
<pricing-card>
...
</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>
Comprar ahora
</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>
.card {
border-radius:16px;
padding:20px;
}
</style> <div class="card">
<slot></slot>
</div>
`;
}
}Esto cambia completamente la forma de maquetar en Joomla.
Casos reales donde brillan en Joomla
Botones globales
<joomla-button>
Contactar
</joomla-button>Tarjetas de servicios
<service-card>
</service-card>Boxes de precios
<pricing-card>
</pricing-card>Alertas personalizadas
<site-alert type="success">
</site-alert>FAQs interactivas
<faq-accordion>
</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?
