Transform all named template slots in the light DOM to named div slots

packages/app-shell/src/app-shell.js

@@ -14,7 +14,7 @@ import {BuildInfo} from './build-info.js';
 import {send as notify} from '@dbp-toolkit/common/notification';
 import {appWelcomeMeta} from './dbp-app-shell-welcome.js';
 import {MatomoElement} from "@dbp-toolkit/matomo/src/matomo";
-import {AdapterLitElement} from "@dbp-toolkit/provider/src/adapter-lit-element";
+import DBPLitElement from "@dbp-toolkit/common/dbp-lit-element";
 
 
 const i18n = createI18nInstance();
@@ -41,7 +41,7 @@ const importNotify = async (promise) => {
     }
 };
 
-export class AppShell extends ScopedElementsMixin(AdapterLitElement) {
+export class AppShell extends ScopedElementsMixin(DBPLitElement) {
     constructor() {
         super();
         this.lang = i18n.language;

packages/common/dbp-lit-element.js

@@ -4,4 +4,42 @@ export default class DBPLitElement extends AdapterLitElement {
     _(selector) {
         return this.shadowRoot === null ? this.querySelector(selector) : this.shadowRoot.querySelector(selector);
     }
+
+    connectedCallback() {
+        this.updateComplete.then(() => {
+            // transform all named template slots in the light DOM to named div slots
+            this.transformTemplateSlots();
+        });
+
+        super.connectedCallback();
+    }
+
+    /**
+     * Transforms all named template slots in the light DOM to named div slots
+     */
+    transformTemplateSlots() {
+        // query all named slots of the component
+        const slots = this.shadowRoot.querySelectorAll("slot[name]");
+
+        slots.forEach((slot) => {
+            const name = slot.name;
+            // search if there is a template with the name of the slot in the light DOM of the component
+            const templateElem = this.querySelector("template[slot=" + name + "]");
+
+            if (!templateElem) {
+                return;
+            }
+
+            // create a slot div container to put in the cloned template content
+            const divElem = document.createElement('div');
+            divElem.slot = name;
+            divElem.appendChild(templateElem.content.cloneNode(true));
+
+            // remove the old template with slot attribute
+            templateElem.remove();
+
+            // put the slot div container with the cloned template in the light DOM
+            this.appendChild(divElem);
+        });
+    }
 }