Luigi Container API

August 6, 2026 · View on GitHub

This document outlines the parameters provided by the Luigi Container.
In addition you can use standard addEventListener function to react on events emmitted by the Luigi Container. The list of events and their meaning can be found here.

API Reference

viewurl 

The URL of the microfrontend to be rendered.

Type: String

Example

<luigi-container viewurl="/index.html"></luigi-container>

Example

myContainer.viewurl = "/index.html"

Meta:

  • since: 1.0.0

deferInit 

If set to true defers from initializing the microfronted automatically. In that case init() can be used.

Type: Boolean

Example

<luigi-container viewurl="/index.html" defer-init></luigi-container>

Example

myContainer.deferInit = true

Meta:

  • since: 1.0.0

context 

The stringified context object to be passed to the microfrontend.

Type: String

Example

<luigi-container viewurl="/index.html" context='{"label": "Dashboard"}'></luigi-container>

Example

myContainer.context = {label: "Dashboard"}

Meta:

  • since: 1.0.0

label 

Label information for the microfrontend.

Type: String

Example

<luigi-container viewurl="/index.html" label="Dashboard"></luigi-container>

Example

myContainer.label = "Dashboard"

Meta:

  • since: 1.0.0

webcomponent 

Predicate that sets whether the microfrontend is to be rendered in a web component or not. It can also be an object with the attributes shown in a table below.

Type: Boolean | WebComponentSettings | String

Params

  • specifies boolean -

    if a microfrontend is a webcomponent or not without any other settings

  • [WebComponentSettings] Object -

    specifies that the microfrontend is a webcomponent with addtional settings

    • .type string -

      a string, like module

    • .selfRegistered boolean -

      if it is true, the web component bundle will be added via script tag

    • .tagName string -

      tag name where web component is added to DOM

  • string string -

    must be a stringified boolean or JSON object from type WebComponentSettings

Note: If you have to use the mechanism of `selfRegistered`, we recommend using the following code in your web component:

window.Luigi._registerWebcomponent(new URL(document.currentScript?.getAttribute('src'), location), );
The advantage of this line of code is: you don't have to specify a tag name, thus avoiding the duplication of self-defined tag names.

Example

<luigi-container webcomponent='{"type": "module", "selfRegistered": true, "tagName": "my-webcomponent"}'></luigi-container>

Example

myContainer.webcomponent = { type: 'module', selfRegistered: true, tagName: 'my-webcomponent'}

Meta:

  • since: 1.0.0

locale 

The locale to be passed to the web-component-based micro frontend.

Type: String

Example

<luigi-container locale="en_us"></luigi-container>

Example

myContainer.locale = "en_us"

Meta:

  • since: 1.0.0

theme 

The theme to be passed to the web-component-based micro frontend.

Type: String

Example

<luigi-container viewurl="/index.html" theme='sap_horizon'></luigi-container>

Example

myContainer.theme = 'sap_horizon'

Meta:

  • since: 1.0.0

activeFeatureToggleList 

The list of active feature toggles to be passed to the web-component-based micro frontend.

Type: Array<string>

Example

myContainer.activeFeatureToggleList = ["enable-foo", "allow-bar"]

Example

<luigi-container viewurl="/index.html" active-feature-toggle-list='["enable-foo", "allow-bar"]'></luigi-container>

Meta:

  • since: 1.0.0

skipCookieCheck 

If set to true, skips third party cookie check.

Type: Boolean

Example

<luigi-container viewurl="/index.html" skipCookieCheck></luigi-container>

Example

myContainer.skipCookieCheck = true

Meta:

  • since: 1.4.0

skipInitCheck 

If set to true, skips handshake and ready event is fired immediately.

Type: Boolean

Example

<luigi-container viewurl="/index.html" skipInitCheck></luigi-container>

Example

myContainer.skipInitCheck = true

Meta:

  • since: 1.0.0

nodeParams 

The parameters to be passed to the web-component-based micro frontend.

Type: Object

Example

<luigi-container viewurl="/index.html" node-params='{"node":"param"}'></luigi-container>

Example

myContainer.nodeParams = {foo: bar}

Meta:

  • since: 1.0.0

noShadow 

If set to true, the Luigi container webcomponent will not use the shadow DOM for rendering.

Type: Boolean

Example

<luigi-container viewurl="/index.html" no-shadow></luigi-container>

Example

myContainer.noShadow = true

Meta:

  • since: 1.2.0

searchParams 

The search parameters to be passed to the web-component-based micro frontend.

Type: Object

Example

<luigi-container viewurl="/index.html" search-params='{"search":"param"}'></luigi-container>

Example

myContainer.searchParams = {foo: bar}

Meta:

  • since: 1.0.0

pathParams 

The path parameters to be passed to the web-component-based micro frontend.

Type: Object

Example

<luigi-container viewurl="/index.html" path-params='{"path":"param"}'></luigi-container>

Example

myContainer.pathParams = {foo: "bar"}

Meta:

  • since: 1.0.0

clientPermissions 

The clientPermissions to be passed to the web-component-based micro frontend.

Type: Object

Example

<luigi-container viewurl="/index.html" client-permissions='{"permission": "adminGroup"}'></luigi-container>

Example

myContainer.clientPermissions = {permission: "adminGroup"}

Meta:

  • since: 1.0.0

userSettings 

The user settings to be passed to the web-component-based micro frontend.

Type: Object

Example

<luigi-container viewurl="/index.html" user-settings='{"language": "de", "theme":"sap_horizon"}'></luigi-container>

Example

myContainer.userSettings = {language: 'de', theme: 'sap_horizon'}

Meta:

  • since: 1.0.0

anchor 

The anchor value to be passed to the web-component-based micro frontend.

Type: String

Example

<luigi-container viewurl="/index.html" anchor='#foo'></luigi-container>

Example

myContainer.anchor = '#foo'

Meta:

  • since: 1.0.0

allowRules 

The list of rules for the content in the iframe, managed by the HTML allow attribute. You can use one or more rules by adding them to the array, for example allowRules: ["microphone", "camera"].

Type: Array<string>

Example

<luigi-container viewurl="/index.html" allow-rules='["microphone", "camera"]'></luigi-container>

Example

containerElement.allowRules = ['microphone', 'camera']

Meta:

  • since: 1.2.0

sandboxRules 

The list of rules for the content in the iframe, managed by the HTML sandbox attribute. You can use one or more rules by adding them to the array, for example sandboxRules: ["allow-scripts", "allow-same-origin"].

Type: Array<string>

Example

<luigi-container viewurl="/index.html" sandbox-rules='["allow-scripts", "allow-same-origin"]'></luigi-container>

Example

containerElement.sandboxRules = ['allow-modals', 'allow-popups']

Meta:

  • since: 1.2.0

webcomponentCreationInterceptor 

A function called after the web component for the microfrontend is created. It allows modifying the web component element before it is attached to the DOM, e.g. setting attributes.

Params

  • wc HTMLElement -

    the web component element

  • currentNode Object -

    the current navigation node

  • context Object -

    the context object passed to the web component

  • nodeId string -

    the node identifier

  • isSpecialMf boolean -

    indicates whether the web component is rendered in a modal, splitView or drawer (false for main)

Example

containerElement.webcomponentCreationInterceptor = (wc, currentNode, ctx, nodeId, isSpecialMf) => { wc.setAttribute('data-custom', 'value'); }

Meta:

  • since: NEXT_RELEASE

iframeCreationInterceptor 

A function called after the iframe for the microfrontend is created. It allows modifying the iframe element before it is used, e.g. setting attributes. The iframe is already rendered in the DOM when the interceptor fires.

Params

  • iframe HTMLIFrameElement -

    the iframe element

  • viewGroup string -

    the view group name

  • currentNode Object -

    the current navigation node

  • microFrontendType string -

    type of micro frontend ('main', 'modal', 'drawer', 'usersettings')

Example

containerElement.iframeCreationInterceptor = (iframe, viewGroup, navigationNode, microFrontendType) => { iframe.name = 'my-mfe'; }

Meta:

  • since: NEXT_RELEASE

documentTitle 

The document title value to be passed to the web-component-based micro frontend.

Type: String

Example

<luigi-container viewurl="/index.html" document-title='Luigi App'></luigi-container>

Example

myContainer.documentTitle = 'Luigi App'

Meta:

  • since: 1.2.0

hasBack 

The hasBack value to be passed to the web-component-based micro frontend. It indicates that there is one or more preserved views. Useful when you need to show a back button.

Type: Boolean

Example

<luigi-container viewurl="/index.html" has-back></luigi-container>

Example

myContainer.hasBack = true

Meta:

  • since: 1.2.0

dirtyStatus 

The dirty status value to be passed to the web-component-based micro frontend. It's used to indicate that there are unsaved changes when navigating away.

Type: Boolean

Example

<luigi-container viewurl="/index.html" dirty-status></luigi-container>

Example

myContainer.dirtyStatus = true

Meta:

  • since: 1.2.0

authData 

The authData value to be passed to the iframe-based micro frontend.

Type: Object

Meta:

  • since: 1.2.0

updateContext 

Function that updates the context of the microfrontend.

Params

  • contextObj Object -

    the context data

  • internal Object -

    internal luigi legacy data used for iframes

Example

containerElement.updateContext({newContextData: 'some data'})

Returns: void -

no explicit return type

Meta:

  • since: 1.0.0

sendCustomMessage 

Send a custom message to the microfronted.

Params

  • id String -

    a string containing the message id

  • data Object -

    data to be sent alongside the custom message

Example

containerElement.sendCustomMessage('my-message-id', {dataToSend: 'some data'})

Returns: void -

no explicit return type

Meta:

  • since: 1.0.0

closeAlert 

A function that notifies the microfrontend that the opened alert has been closed. This function is deprecated, please use notifyAlertClosed.

Params

  • id String -

    the id of the opened alert

  • dismissKey String -

    the key specifying which dismiss link was clicked on the alert message (optional)

Example

containerElement.closeAlert('my-alert-id', 'my-dismiss-key')

Returns: void -

no explicit return type

Meta:

  • since: 1.0.0
  • deprecated: this is deprecated

notifyAlertClosed 

A function that notifies the microfrontend that the opened alert has been closed.

Params

  • id String -

    the id of the opened alert

  • dismissKey String -

    the key specifying which dismiss link was clicked on the alert message (optional)

Example

containerElement.notifyAlertClosed('my-alert-id', 'my-dismiss-key')

Returns: void -

no explicit return type

Meta:

  • since: 1.6.0

notifyConfirmationModalClosed 

A function that notifies the microfrontend that the opened confirmation modal has been closed.

Params

  • result boolean -

    the output of the opened confirmation modal (true/false)

Example

containerElement.notifyConfirmationModalClosed(true)

Returns: void -

no explicit return type

Meta:

  • since: 1.7.0

updateViewUrl 

Updates route of the microfrontend by sending a message to the iframe that sets new view URL.

Params

  • viewurl string -

    new view URL

  • internal Object -

    Luigi legacy data (optional)

Returns: void -

no explicit return type

Meta:

  • since: 1.5.0

init 

Manually triggers the micro frontend rendering process when using defer-init attribute.

Example

containerElement.init()

Returns: void -

no explicit return type

Meta:

  • since: 1.0.0