With the declarative sap/ui/core/ComponentSupport
API, it is possible to define the initially started component directly in the HTML markup. This provides an alternative to the imperative way with JavaScript.
The declarative component support is not activated by default but must be enabled via the bootstrap. To do this, the following attribute must be added to the bootstrap script to load the ComponentSupport
module (see the figure Using the Declarative API):

The run
function of sap/ui/core/ComponentSupport
is called automatically once the module has been loaded. It scans the DOM for HTML elements containing a special data attribute named data-sap-ui-component
. All DOM elements marked with this data attribute will be regarded as container elements into which a sap/ui/core/ComponentContainer
is inserted.
Additional data attributes are then used to define the constructor arguments of the created component container instance. In the example shown, the following data attributes are specified:
data-id
This attribute is used to pass the Id for the component container instance to be created.
data-name
The
data-name
attribute contains the name of the component to be instantiated.data-settings
The object specified for the
data-settings
attribute is passed to the component instance when it is created. In the example, it is used to set the component instance Id.
ComponentSupport
module enforces asynchronous module loading of the component with "manifest first". This means that the manifest.json
file is loaded before evaluating the component to optimize loading behavior (see above).