Allow globally overriding slots in the light dom of components and use it to...

Allow globally overriding slots in the light dom of components and use it to override the auth-info slot in the Nextcloud file picker

packages/common/dbp-lit-element.js

 import {AdapterLitElement} from "./src/adapter-lit-element";
 
 export default class DBPLitElement extends AdapterLitElement {
-    _(selector) {
-        return this.shadowRoot === null ? this.querySelector(selector) : this.shadowRoot.querySelector(selector);
+    constructor() {
+        super();
+        this.htmlOverrides = '';
+    }
+
+    /**
+     * See: https://lit-element.polymer-project.org/guide/properties#initialize
+     */
+    static get properties() {
+        return {
+            ...super.properties,
+            htmlOverrides: { type: String, attribute: 'html-overrides' },
+        };
+
     }
 
     connectedCallback() {
         this.updateComplete.then(() => {
-            // transform all named template slots in the light DOM to named div slots
-            this.transformTemplateSlots();
+            // transform all global override templates or named template slots in the light DOM to named div slots
+            this.transformSlots();
         });
 
         super.connectedCallback();
     }
 
+    _(selector) {
+        return this.shadowRoot === null ? this.querySelector(selector) : this.shadowRoot.querySelector(selector);
+    }
+
+    getTagName() {
+        const tagName = this.dataset ? (this.dataset.tagName || '') : '';
+
+        return tagName !== '' ? tagName : this.tagName.toLowerCase();
+    }
+
     /**
-     * Transforms all named template slots in the light DOM to named div slots
+     * Transforms all global override templates or named template slots in the light DOM to named div slots
      */
-    transformTemplateSlots() {
+    transformSlots() {
         // query all named slots of the component
         const slots = this.shadowRoot.querySelectorAll("slot[name]");
 
+        // if there are no slots we can exit
+        if (slots.length === 0) {
+            return;
+        }
+
         slots.forEach((slot) => {
-            const name = slot.name;
+            const slotName = 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 + "]");
+            const templateElem = this.querySelector("template[slot=" + slotName + "]");
 
             if (!templateElem) {
                 return;
@@ -32,14 +60,51 @@ export default class DBPLitElement extends AdapterLitElement {
 
             // create a slot div container to put in the cloned template content
             const divElem = document.createElement('div');
-            divElem.slot = name;
+            divElem.slot = slotName;
             divElem.appendChild(templateElem.content.cloneNode(true));
 
-            // remove the old template with slot attribute
+            // remove the old template
             templateElem.remove();
 
             // put the slot div container with the cloned template in the light DOM
             this.appendChild(divElem);
         });
+
+        // check if we have an "html-override" attribute set so we need to check for the global override template
+        if (this.htmlOverrides !== '') {
+            const globalOverrideTemplateElem = document.querySelector('template#' + this.htmlOverrides);
+
+            if (globalOverrideTemplateElem) {
+                // we need to clone the element so we can access the content
+                const overrideTemplateElemClone = globalOverrideTemplateElem.content.cloneNode(true);
+                const tagName = this.getTagName();
+
+                // then we will look if there is an override for the current tag
+                const templateOverrideElem = overrideTemplateElemClone.querySelector('template#' + tagName);
+
+                if (templateOverrideElem) {
+                    // if there is an override we again need to clone that template so we can access the content
+                    const templateOverrideElemClone = templateOverrideElem.content.cloneNode(true);
+
+                    // now we need to look for slots in the override
+                    slots.forEach((slot) => {
+                        const slotName = slot.name;
+
+                        // if a slot is found we need to remove the current slot in the light DOM
+                        // so we are not showing the old and new content at the same time
+                        if (templateOverrideElemClone.querySelector('[slot="' + slotName + '"]')) {
+                            const currentSlotElement = this.querySelector('[slot="' + slotName + '"]');
+
+                            if (currentSlotElement) {
+                                currentSlotElement.remove();
+                            }
+                        }
+                    });
+
+                    // append the cloned template to the light DOM
+                    this.appendChild(templateOverrideElemClone);
+                }
+            }
+        }
     }
 }

packages/file-handling/src/dbp-nextcloud-file-picker.js

@@ -1508,7 +1508,8 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
                     </div>
                     <div class="block text-center m-inherit ${classMap({hidden: this.isPickerActive})}">
                         <p class="m-inherit"><br>
-                            ${i18n.t('nextcloud-file-picker.auth-info')}<br>${this.authInfo}  
+                            ${i18n.t('nextcloud-file-picker.auth-info')}
+                            <slot name="auth-info"><br />${this.authInfo}</slot>
                         </p>
                     </div>
                 </div>

packages/file-handling/src/file-sink.js

@@ -268,6 +268,7 @@ export class FileSink extends ScopedElementsMixin(DBPLitElement) {
                    select-button-text="${i18n.t('file-sink.select-directory')}"
                    ?disabled="${this.disabled}"
                    lang="${this.lang}"
+                   subscribe="html-overrides"
                    auth-url="${this.nextcloudAuthUrl}"
                    web-dav-url="${this.nextcloudWebDavUrl}"
                    nextcloud-name="${this.nextcloudName}"

packages/file-handling/src/file-source.js

@@ -464,6 +464,7 @@ export class FileSource extends ScopedElementsMixin(DBPLitElement) {
                    class="${classMap({hidden: this.nextcloudWebDavUrl === "" || this.nextcloudAuthUrl === ""})}"
                    ?disabled="${this.disabled}"
                    lang="${this.lang}"
+                   subscribe="html-overrides"
                    auth-url="${this.nextcloudAuthUrl}"
                    web-dav-url="${this.nextcloudWebDavUrl}"
                    nextcloud-name="${this.nextcloudName}"