Controller Registry adds behavior to any HTML element
Custom elements are fantastic and very useful when you want to define a new type of element with a clear responsibility, but they have significant limitations for many real-world cases: they take full control of a tag and do not allow combining several different behaviors in a single HTML tag, which makes it difficult to add reusable behaviors to native elements.
The proposed alternative is controllers or traits, an abstraction that separates behavior from the HTML element itself and places it in an external object that is dynamically associated with the tag and controls it without replacing its main nature.
In practice, a Controller Registry acts as a central map that associates names with behaviors. When an element declares a list of names in its controller attribute, the registry attaches the available controllers and keeps a list of elements waiting if any controller is not yet defined.
Basic operation: 1. Controllers in HTML are declared with a controller attribute that accepts a space-separated list. 2. In JavaScript, there is a central registry that maps names to functions or instances. 3. Adding a name to the controller attribute makes the registry automatically attach the behavior to the element, and defining a new controller updates all elements that were waiting for it. 4. Unlike custom elements, controllers can be removed and re-added as many times as desired.
Essential implementation: The core is a ControllerRegistry class and a global instance that maintains internal structures such as WeakMap to associate metadata with elements without preventing garbage collection. A MutationObserver watches DOM insertions and changes to the controller attribute to detect when controllers need to be attached or removed.
When defining a controller, the define function inserts the definition into the map and also checks if there are elements waiting for that name. If the controller is a constructor function, it is wrapped in an adapter that creates the instance and manages disconnection by calling a detach method if it exists.
The attach process creates a promise that resolves when the controller is removed and also generates an abort controller whose signal is stored as a signal property on the promise. This allows using the promise as a third argument in addEventListener so that listeners are automatically removed when the controller disconnects. A helper similar to DomTokenList makes it easy to manipulate the controller attribute just like class is manipulated.
There is a small interactive exercise on CodePen that shows usage examples and allows editing the controller attribute from developer tools to see how behaviors are applied and removed in real time.
About Q2BSTUDIO: We are Q2BSTUDIO, a software development company specialized in custom applications and custom software that helps businesses leverage artificial intelligence and improve their digital security. We offer artificial intelligence (AI) solutions for businesses, AI agents, cybersecurity, cloud services on AWS and Azure, business intelligence services, and Power BI implementations. Our expertise ranges from cloud architectures to custom product development, integrating AI models and advanced analytics capabilities.
Why this matters: Controllers make it easier to create rich, reusable user experiences without proliferating new custom HTML elements. This is especially useful in custom application projects where flexibility and the ability to integrate with backend systems and cloud services on AWS and Azure is key. With such an approach, uniform AI agents, reactive components, and business intelligence solutions integrated with Power BI can be quickly implemented.
Conclusions: The Controller Registry prototype shows that it is possible to extend the DOM with modular and flexible behaviors without relying exclusively on custom elements. The idea is compatible with custom elements and offers advantages in composition and dynamism. If you are interested in having Q2BSTUDIO evaluate how to integrate these patterns into your custom software project or implement artificial intelligence solutions, cybersecurity, cloud services on AWS and Azure, and Power BI, contact us for personalized consulting.
