packages/app-shell/package.json

 {
   "name": "@dbp-toolkit/app-shell",
   "homepage": "https://gitlab.tugraz.at/dbp/web-components/toolkit/-/tree/master/packages/app-shell",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "main": "src/index.js",
   "license": "LGPL-2.1-or-later",
   "repository": {

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

@@ -3,6 +3,7 @@ import {html, css} from 'lit-element';
 import {ScopedElementsMixin} from '@open-wc/scoped-elements';
 import {LanguageSelect} from '@dbp-toolkit/language-select';
 import {Icon} from '@dbp-toolkit/common';
+import {querySlotted} from '@dbp-toolkit/common/utils';
 import {AuthKeycloak} from '@dbp-toolkit/auth';
 import {AuthMenuButton} from './auth-menu-button.js';
 import {Notification} from '@dbp-toolkit/notification';
@@ -839,14 +840,17 @@ export class AppShell extends ScopedElementsMixin(AdapterLitElement) {
         const mainClassMap = classMap({hidden: appHidden});
         const slotClassMap = classMap({hidden: !appHidden});
 
-        // XXX: Safari 11 doesn't like CSS being applied to slots or via HTML,
-        // so we have to remove the slot instead of hiding it
         if (!appHidden) {
             this.updateComplete.then(() => {
+                // XXX: Safari 11 doesn't like CSS being applied to slots or via HTML,
+                // so we have to remove the slot instead of hiding it
                 // select slots with no name attribute
                 const slot = this.shadowRoot.querySelector("slot:not([name])");
                 if (slot)
                     slot.remove();
+
+                // remove the "slot-hidden" class of elements in the html of injected slots to show them after the page was loaded
+                querySlotted(this.shadowRoot, '.slot-hidden').forEach((slot) => { slot.classList.remove("slot-hidden"); });
             });
         }
 

packages/common/package.json

 {
   "name": "@dbp-toolkit/common",
   "homepage": "https://gitlab.tugraz.at/dbp/web-components/toolkit/-/tree/master/packages/common",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "module": "index.js",
   "license": "LGPL-2.1-or-later",
   "repository": {

packages/common/utils.js

@@ -335,3 +335,23 @@ export const getBaseName = (str) => {
 export const getFileExtension = (str) => {
     return str.split('.').pop();
 };
+
+/**
+ * Queries for "selector" in "root" in the slot html
+ *
+ * @param root
+ * @param selector
+ * @returns {*[]}
+ */
+export const querySlotted = (root, selector) => {
+    let slots = root.querySelectorAll('slot');
+    let matched = [];
+
+    slots.forEach((slot) => {
+        matched = matched.concat(slot.assignedElements().filter((el) => {
+            return el.matches(selector);
+        }));
+    });
+
+    return matched;
+};