From 0a118d11b0b3e0765589aac19ad22265fa7e485b Mon Sep 17 00:00:00 2001
From: Christoph Reiter <reiter.christoph@gmail.com>
Date: Wed, 24 Nov 2021 10:27:43 +0100
Subject: [PATCH] slot templates: fix templates being created in the wrong
shadow root
This makes problems with the new scoped elements polyfill, which now correctly
makes globally registered elements not visible in the shadow roots. Instead
we have to add the tempaltes at the level of the templates so they get their
global web components and only then transplant them into the light dom of the
nested web components with their own registries.
---
packages/common/dbp-lit-element.js | 23 +++++++++++++++++++++--
1 file changed, 21 insertions(+), 2 deletions(-)
diff --git a/packages/common/dbp-lit-element.js b/packages/common/dbp-lit-element.js
index 2112ab56..4c6e760c 100644
--- a/packages/common/dbp-lit-element.js
+++ b/packages/common/dbp-lit-element.js
@@ -4,6 +4,7 @@ export default class DBPLitElement extends AdapterLitElement {
constructor() {
super();
this.htmlOverrides = '';
+ this._rootContainer = null;
}
/**
@@ -26,6 +27,14 @@ export default class DBPLitElement extends AdapterLitElement {
super.connectedCallback();
}
+ disconnectedCallback() {
+ super.disconnectedCallback();
+
+ if (this._rootContainer !== null) {
+ this._rootContainer.remove();
+ }
+ }
+
_(selector) {
return this.shadowRoot === null ? this.querySelector(selector) : this.shadowRoot.querySelector(selector);
}
@@ -86,6 +95,13 @@ export default class DBPLitElement extends AdapterLitElement {
// if there is an override we again need to clone that template so we can access the content
const templateOverrideElemClone = templateOverrideElem.content.cloneNode(true);
+ // Create a dummy node and add it to the the same shadow root the templates are from
+ // By adding it into the template we have the nice side effect that it is not visible
+ let container = document.createElement("div");
+ globalOverrideTemplateElem.append(container);
+ container.appendChild(templateOverrideElemClone);
+ this._rootContainer = container;
+
// now we need to look for slots in the override
slots.forEach((slot) => {
const slotName = slot.name;
@@ -101,8 +117,11 @@ export default class DBPLitElement extends AdapterLitElement {
}
});
- // append the cloned template to the light DOM
- this.appendChild(templateOverrideElemClone);
+ // Now move the slots into the light dom of the target.
+ // The parent node in the other shadow root has to stay around for this to work
+ while (container.childNodes.length) {
+ this.appendChild(container.removeChild(container.childNodes[0]));
+ }
}
}
}
--
GitLab