From ae6193fddbced85d0bbf620e4ab7d4aa4dfbd748 Mon Sep 17 00:00:00 2001
From: Patrizio Bekerle <patrizio.bekerle@tugraz.at>
Date: Tue, 15 Jun 2021 09:44:54 +0200
Subject: [PATCH] Remove "slot-hidden" class of elements in html of injected
slots after page was loaded
---
packages/app-shell/package.json | 2 +-
packages/app-shell/src/app-shell.js | 8 ++++++--
2 files changed, 7 insertions(+), 3 deletions(-)
diff --git a/packages/app-shell/package.json b/packages/app-shell/package.json
index cd029e2d..b48d00bf 100644
--- a/packages/app-shell/package.json
+++ b/packages/app-shell/package.json
@@ -1,7 +1,7 @@
{
"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": {
diff --git a/packages/app-shell/src/app-shell.js b/packages/app-shell/src/app-shell.js
index 9223afe5..3d74403b 100644
--- a/packages/app-shell/src/app-shell.js
+++ b/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"); });
});
}
--
GitLab