From 065b6fe2021cb6d923893369d173717168083ca5 Mon Sep 17 00:00:00 2001
From: Patrizio Bekerle <patrizio.bekerle@tugraz.at>
Date: Thu, 17 Jun 2021 14:43:21 +0200
Subject: [PATCH] Transform all named template slots in the light DOM to named
div slots
---
packages/app-shell/src/app-shell.js | 4 +--
packages/common/dbp-lit-element.js | 38 +++++++++++++++++++++++++++++
2 files changed, 40 insertions(+), 2 deletions(-)
diff --git a/packages/app-shell/src/app-shell.js b/packages/app-shell/src/app-shell.js
index 3d74403b..4a369850 100644
--- a/packages/app-shell/src/app-shell.js
+++ b/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;
diff --git a/packages/common/dbp-lit-element.js b/packages/common/dbp-lit-element.js
index 9e9b3192..5b0af19e 100644
--- a/packages/common/dbp-lit-element.js
+++ b/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);
+ });
+ }
}
--
GitLab