template slots: handle slots being added after the first render

Instead of querying the slots in the shadow DOM after the first render just add all available slots to the light DOM.

This fixes missing filled slots when slots where added after the first render, for example if they were used only after some property is set.

packages/common/dbp-lit-element.js

@@ -50,7 +50,9 @@ export default class DBPLitElement extends AdapterLitElement {
 
     /**
      * Transforms all global override templates or named template slots in the light DOM to named div slots
-     * on the first render
+     * on the first render.
+     * 
+     * Global overrides will replace all existing slotted elements with the same slot name.
      */
      _importTemplateSlots() {
         if (!this._renderDone) {
@@ -103,14 +105,21 @@ export default class DBPLitElement extends AdapterLitElement {
                     }
                 }
 
+                // Global overrides will replace local ones.
+                // Either normal slotted elements or the ones we create from templates.
+                for(let slotElem of globalTemplateSlots) {
+                    for (let elm of this.querySelectorAll('[slot="' + slotElem.slot + '"]')) {
+                        elm.remove();
+                    }
+                }
+
                 // 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);
                 this._globalSlotsContainer = container;
-
-                for(let slot of globalTemplateSlots) {
-                    container.appendChild(slot);
+                for(let slotElem of globalTemplateSlots) {
+                    container.appendChild(slotElem);
                 }
 
                 // Now move the slots into the light dom of the target.