diff --git a/package-lock.json b/package-lock.json
index aa82b7b0..873dcdf4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "@angular/common": "^17.0.5",
         "@angular/compiler": "^17.0.5",
         "@angular/core": "^17.0.5",
+        "@angular/elements": "^17.1.0",
         "@angular/forms": "^17.0.5",
         "@angular/localize": "^17.0.5",
         "@angular/platform-browser": "^17.0.5",
@@ -792,6 +793,22 @@
         "zone.js": "~0.14.0"
       }
     },
+    "node_modules/@angular/elements": {
+      "version": "17.1.0",
+      "resolved": "https://registry.npmjs.org/@angular/elements/-/elements-17.1.0.tgz",
+      "integrity": "sha512-cpS+f1kVVL92SIt9JRDH4eqPLMLc/7fUWYcZlGVXaPi0hq8FNRjgnNwq+zQ26fQD7Y+VjSj9hag1BdPQPCKzIQ==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "engines": {
+        "node": "^18.13.0 || >=20.9.0"
+      },
+      "peerDependencies": {
+        "@angular/core": "17.1.0",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
     "node_modules/@angular/forms": {
       "version": "17.1.0",
       "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-17.1.0.tgz",
diff --git a/package.json b/package.json
index 730bd731..293b5a06 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "@angular/common": "^17.0.5",
     "@angular/compiler": "^17.0.5",
     "@angular/core": "^17.0.5",
+    "@angular/elements": "^17.1.0",
     "@angular/forms": "^17.0.5",
     "@angular/localize": "^17.0.5",
     "@angular/platform-browser": "^17.0.5",
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index cfc10885..9ef3795b 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,6 +1,7 @@
-import {NgModule} from "@angular/core";
+import {NgModule, Injector, ApplicationRef, DoBootstrap} from "@angular/core";
 import {NgxEditorModule} from "ngx-editor";
 import {BrowserModule} from "@angular/platform-browser";
+import {createCustomElement} from "@angular/elements";
 import {HTTP_INTERCEPTORS, HttpClientModule} from "@angular/common/http";
 import {OAuthModule} from "angular-oauth2-oidc";
 import {FormsModule, ReactiveFormsModule} from "@angular/forms";
@@ -230,10 +231,20 @@ import {ActionMenuComponent} from "./view/action-menu/action-menu/action-menu.co
     SbbBreadcrumbModule,
     SbbAutocompleteModule,
   ],
-  bootstrap: [AppComponent],
+  bootstrap: environment.customElement ? [] : [AppComponent],
   providers: [
     ... environment.backendUrl ? [{provide: BASE_PATH, useValue: environment.backendUrl}] : [],
     {provide: HTTP_INTERCEPTORS, useClass: HttpErrorInterceptor, multi: true},
   ],
 })
-export class AppModule {}
+
+export class AppModule implements DoBootstrap {
+  constructor(private injector: Injector) {}
+
+  ngDoBootstrap() {
+    if (environment.customElement) {
+      const element = createCustomElement(AppComponent, {injector: this.injector});
+      customElements.define("sbb-root", element);
+    }
+  }
+}
diff --git a/src/environments/environment.model.ts b/src/environments/environment.model.ts
index 17975187..e2f8a185 100644
--- a/src/environments/environment.model.ts
+++ b/src/environments/environment.model.ts
@@ -6,4 +6,5 @@ export interface Environment {
   backendUrl?: string;
   authConfig?: AuthConfig;
   disableBackend: boolean;
+  customElement: boolean;
 }
diff --git a/src/environments/environment.standalone.ts b/src/environments/environment.standalone.ts
index d1f55802..feacfaee 100644
--- a/src/environments/environment.standalone.ts
+++ b/src/environments/environment.standalone.ts
@@ -4,4 +4,5 @@ export const environment: Environment = {
   production: true,
   label: "standalone",
   disableBackend: true,
+  customElement: true,
 };
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index 9b272f01..44ca836f 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -24,6 +24,7 @@ export const environment: Environment = {
   backendUrl: "http://localhost:8080",
   authConfig,
   disableBackend: false,
+  customElement: false,
 };
 
 /*