There are two places where components can live:
- In a theme
- In the application
Within the application, the components share a single namespace; if there is a component with the same name in both the theme and in the application, the application version gets used. This makes it very simple to make local tweaks to theme components if needed; you can just copy them from the theme into the application and modify whatever you need to, and it will just work.
During the compilation process, a list of all available component tags (based on the directory names they inhabit, either in the theme or application) is built and passed in to the ErstwhileApplication during the bootstrap process. It’s worth mentioning that ErML tags (like HTML) are not case sensitive; the convention is to use them CamelCapped to differentiate from surrounding HTML.
When rendering ErML, the view templates and layouts are converted into an XML document and traversed by the renderer; any tag that is found to be on the component list is then instantiated as a component and (depending on how the developer implements it) is turned into HTML and added to the DOM. This HTML is the output of the component’s getHTML() which, if not overridden, will render the component’s EJS file if one is specified.
If that component is a container (based on having isContainer() overridden to return true) it is further traversed and anything inside of it also rendered and added to the DOM at the parent component’s <InnerContent /> tag.
Once the DOM is fully rendered, each component added has its initialize() method called.