Interface ApplicationContext

The HTML element containing the rest of the application inside the current web component.

This element can be used as a root component to find other dom elements within the same application, for example:

// Correct:
const node = ctx.getApplicationContainer().querySelector('.my-element');

// Incorrect because cannot search in shadow roots
const node = document.querySelector('.my-element');
Copy

The web component's host element. This dom node can be accessed by the host site.

Returns the current locale of the application.

E.g. "de-DE"

A root node that resolves to the the shadow root or the site's document.

For example:

const ctx: ApplicationContext = ...;
const node = ctx.getRoot().getElementById("id"); // Correct with or without shadow root.
Copy

The current web component's shadow root. This shadow root is located inside the host element.

NOTE: This method returns undefined if the application does not use a shadow root.

See also ApplicationConfig.disableShadowRoot and ().

Returns the locales supported by the application, i.e. the locales that have associated i18n messages.

For example: ["de", "en"]

Changes the application's locale. locale must be one of the supported locales, see () or undefined (for automatic locale). Note that locale does not need to be a precise match, e.g. "de-DE" is also valid if "de" is supported.

NOTE: This method will currently trigger a full restart of the application. Altering the locale on the fly is possible in theory but has not been implemented yet.