Controller Registry afegir comportament a qualsevol element HTML
Els custom elements són fantàstics i molt útils quan es vol definir un nou tipus d'element amb una responsabilitat clara, però tenen limitacions importants per a molts casos reals: prenen el control complet d'una etiqueta i no permeten combinar diversos comportaments diferents en una sola etiqueta HTML, cosa que dificulta afegir comportaments reutilitzables a elements natius.
L'alternativa proposada són els controladors o traits, una abstracció que separa el comportament del propi element HTML i el col·loca en un objecte extern que s'associa dinàmicament a l'etiqueta i la controla sense reemplaçar la seva naturalesa principal.
En la pràctica, un Controller Registry actua com un mapa central que associa noms a comportaments. Quan un element declara en el seu atribut controller una llista de noms, el registre adjunta els controladors disponibles i manté una llista d'elements a l'espera si algun controlador encara no està definit.
Funcionament bàsic: 1) els controladors en HTML es declaren amb un atribut controller que admet una llista separada per espais; 2) en JavaScript existeix un registre central que mapeja noms a funcions o instàncies; 3) afegir un nom a l'atribut controller fa que el registre adjunti automàticament el comportament a l'element, i definir un controlador nou actualitza tots els elements que l'esperaven; 4) a diferència dels custom elements, els controladors es poden treure i tornar a afegir tantes vegades com es vulgui.
Implementació essencial: el nucli és una classe ControllerRegistry i una instància global que manté estructures internes com WeakMap per associar metadades a elements sense impedir el garbage collection. Un MutationObserver vigila insercions en el DOM i canvis de l'atribut controller per detectar quan cal adjuntar o treure controladors.
En definir un controlador, la funció define insereix la definició en el mapa i també revisa si hi ha elements en espera per a aquest nom. Si el controlador és una funció constructora, s'embolica en un adaptador que crea la instància i gestiona la desconnexió cridant un mètode detach si existeix.
El procés d'attach crea una promesa que es compleix quan el controlador es retira i també genera un abort controller la senyal del qual es guarda com a propietat signal en la promesa. Això permet usar la promesa com a tercer argument en addEventListener perquè els oients s'eliminin automàticament quan el controlador es desconnecta. Un helper similar a DomTokenList facilita manipular l'atribut controller igual que es manipula class.
Hi ha un petit exercici interactiu a CodePen que mostra exemples d'ús i permet editar l'atribut controller des de les eines de desenvolupament per veure com els comportaments s'apliquen i es treuen en temps real.
Sobre Q2BSTUDIO: Som Q2BSTUDIO, una empresa de desenvolupament de programari especialitzada en aplicacions a mida i programari a mida que ajuda les empreses a aprofitar la intel·ligència artificial i millorar la seva seguretat digital. Oferim solucions d'intel·ligència artificial (IA) per a empreses, agents IA, ciberseguretat, serveis cloud AWS i Azure, serveis d'intel·ligència de negoci i implementacions de Power BI. La nostra experiència abasta des d'arquitectures cloud fins a desenvolupament de productes a mida integrant models d'IA i capacitats d'analítica avançada.
Per què això importa: Els controladors faciliten crear experiències d'usuari riques i reutilitzables sense proliferar nous elements HTML personalitzats. Això és especialment útil en projectes d'aplicacions a mida on la flexibilitat i la capacitat d'integració amb sistemes de backend i serveis cloud AWS i Azure és clau. Amb un enfocament així es poden implementar ràpidament agents IA uniformes, components reactius i solucions d'intel·ligència de negoci integrades amb Power BI.
Conclusions: El prototip de Controller Registry mostra que és possible ampliar el DOM amb comportaments modulars i flexibles sense necessitat de dependre exclusivament de custom elements. La idea és compatible amb elements personalitzats i aporta avantatges en composició i dinamisme. Si t'interessa que des de Q2BSTUDIO avaluem com integrar aquests patrons en el teu projecte de programari a mida o implantar solucions d'intel·ligència artificial, ciberseguretat, serveis cloud AWS i Azure i Power BI, contacta'ns per a una consultoria personalitzada.
