diff --git a/packages/main/src/themes/Button.css b/packages/main/src/themes/Button.css
index 6be2e2d820d7..91b329c8ae4c 100644
--- a/packages/main/src/themes/Button.css
+++ b/packages/main/src/themes/Button.css
@@ -1,8 +1,8 @@
-:host(ui5-button) {
+:host(ui5-button:not([hidden])) {
 	display: inline-block;
 }
 
-ui5-button {
+ui5-button:not([hidden]) {
 	display: inline-block;
 }
 
diff --git a/packages/main/src/themes/Card.css b/packages/main/src/themes/Card.css
index f3abaaf2c936..7a2d62117445 100644
--- a/packages/main/src/themes/Card.css
+++ b/packages/main/src/themes/Card.css
@@ -1,9 +1,9 @@
-:host(ui5-card) {
+:host(ui5-card:not([hidden])) {
 	display: inline-block;
 	width: 100%;
 }
 
-ui5-card {
+ui5-card:not([hidden]) {
 	display: inline-block;
 	width: 100%;
 }
diff --git a/packages/main/src/themes/CheckBox.css b/packages/main/src/themes/CheckBox.css
index 5f204a85c32f..eae8413413b9 100644
--- a/packages/main/src/themes/CheckBox.css
+++ b/packages/main/src/themes/CheckBox.css
@@ -1,11 +1,11 @@
-:host(ui5-checkbox) {
+:host(ui5-checkbox:not([hidden])) {
 	display: inline-block;
 	overflow: hidden;
 	max-width: 100%;
 }
 
 /* ducplicated for IE */
-ui5-checkbox {
+ui5-checkbox:not([hidden]) {
 	display: inline-block;
 	overflow: hidden;
 	max-width: 100%;
diff --git a/packages/main/src/themes/CustomListItem.css b/packages/main/src/themes/CustomListItem.css
index 4c78be266ee0..0744a7dd2c2d 100644
--- a/packages/main/src/themes/CustomListItem.css
+++ b/packages/main/src/themes/CustomListItem.css
@@ -2,11 +2,11 @@
 	outline: none;
 }
 
-:host(ui5-li-custom) {
+:host(ui5-li-custom:not([hidden])) {
 	display: block;
 }
 
-ui5-li-custom {
+ui5-li-custom:not([hidden]) {
 	display: block;
 }
 
diff --git a/packages/main/src/themes/DatePicker.css b/packages/main/src/themes/DatePicker.css
index 50473b2225ea..4a85d00e787f 100644
--- a/packages/main/src/themes/DatePicker.css
+++ b/packages/main/src/themes/DatePicker.css
@@ -1,9 +1,9 @@
-:host(ui5-datepicker) {
+:host(ui5-datepicker:not([hidden])) {
 	display: inline-block;
 	width: 100%;
 }
 
-ui5-datepicker {
+ui5-datepicker:not([hidden]) {
 	display: inline-block;
 	width: 100%;
 }
diff --git a/packages/main/src/themes/Icon.css b/packages/main/src/themes/Icon.css
index f1fd0d17ce99..d5176d6068c2 100644
--- a/packages/main/src/themes/Icon.css
+++ b/packages/main/src/themes/Icon.css
@@ -1,4 +1,4 @@
-:host(ui5-icon) {
+:host(ui5-icon:not([hidden])) {
 	display: inline-block;
 	outline: none;
 	color: var(--sapUiContentNonInteractiveIconColor);
@@ -10,7 +10,7 @@
 	height: 100%;
 }
 
-ui5-icon {
+ui5-icon:not([hidden]) {
 	display: inline-block;
 	outline: none;
 	color: var(--sapUiContentNonInteractiveIconColor);
diff --git a/packages/main/src/themes/Input.css b/packages/main/src/themes/Input.css
index 59b435183e10..580fba31c9ef 100644
--- a/packages/main/src/themes/Input.css
+++ b/packages/main/src/themes/Input.css
@@ -1,9 +1,9 @@
-:host(ui5-input) {
+:host(ui5-input:not([hidden])) {
 	display: inline-block;
 	width: 100%;
 }
 
-ui5-input {
+ui5-input:not([hidden]) {
 	display: inline-block;
 	width: 100%;
 }
diff --git a/packages/main/src/themes/Label.css b/packages/main/src/themes/Label.css
index 306839903a32..6a60e2360339 100644
--- a/packages/main/src/themes/Label.css
+++ b/packages/main/src/themes/Label.css
@@ -1,4 +1,4 @@
-:host(ui5-label) {
+:host(ui5-label:not([hidden])) {
 	display: inline-block;
 	max-width: 100%;
 	cursor: text;
@@ -8,7 +8,7 @@
 	display: flex;
 }
 
-ui5-label {
+ui5-label:not([hidden]) {
 	display: inline-block;
 	max-width: 100%;
 	overflow: hidden;
diff --git a/packages/main/src/themes/Link.css b/packages/main/src/themes/Link.css
index 900a54a2110b..2c2e1741eed9 100644
--- a/packages/main/src/themes/Link.css
+++ b/packages/main/src/themes/Link.css
@@ -1,9 +1,9 @@
-:host(ui5-link) {
+:host(ui5-link:not([hidden])) {
 	display: inline-block;
 	max-width: 100%;
 }
 
-:host(ui5-link) span[data-sap-ui-wc-root] {
+:host(ui5-link:not([hidden])) span[data-sap-ui-wc-root] {
 	display: flex;
 }
 
diff --git a/packages/main/src/themes/List.css b/packages/main/src/themes/List.css
index 175f162d4b7b..95cfe7a3b02d 100644
--- a/packages/main/src/themes/List.css
+++ b/packages/main/src/themes/List.css
@@ -1,9 +1,9 @@
-:host(ui5-list) {
+:host(ui5-list:not([hidden])) {
 	display: block;
 	max-width: 100%;
 }
 
-ui5-list {
+ui5-list:not([hidden]) {
 	display: block;
 	max-width: 100%;
 }
diff --git a/packages/main/src/themes/ListItemBase.css b/packages/main/src/themes/ListItemBase.css
index b43460ce5904..a2b7f2d4e287 100644
--- a/packages/main/src/themes/ListItemBase.css
+++ b/packages/main/src/themes/ListItemBase.css
@@ -1,5 +1,5 @@
 
-:host(ui5-li) {
+:host(ui5-li:not([hidden])) {
 	display: block;
 }
 
@@ -7,7 +7,7 @@
 	outline: none;
 }
 
-ui5-li {
+ui5-li:not([hidden]) {
 	display: block;
 }
 
diff --git a/packages/main/src/themes/MessageStrip.css b/packages/main/src/themes/MessageStrip.css
index e3bdd287f7a7..847fc71a2268 100644
--- a/packages/main/src/themes/MessageStrip.css
+++ b/packages/main/src/themes/MessageStrip.css
@@ -1,9 +1,9 @@
-:host(ui5-messagestrip) {
+:host(ui5-messagestrip:not([hidden])) {
 	display: inline-block;
 	width: 100%;
 }
 
-ui5-messagestrip {
+ui5-messagestrip:not([hidden]) {
 	display: inline-block;
 	width: 100%;
 }
diff --git a/packages/main/src/themes/MultiComboBox.css b/packages/main/src/themes/MultiComboBox.css
index 160681c9c2c7..5d43d8e00595 100644
--- a/packages/main/src/themes/MultiComboBox.css
+++ b/packages/main/src/themes/MultiComboBox.css
@@ -1,11 +1,11 @@
-:host(ui5-multi-combobox) {
+:host(ui5-multi-combobox:not([hidden])) {
 	display: inline-block;
 	width: 100%;
 
 	--_ui5_popover_content_padding: 0;
 }
 
-ui5-multi-combobox {
+ui5-multi-combobox:not([hidden]) {
 	display: inline-block;
 	width: 100%;
 }
diff --git a/packages/main/src/themes/Panel.css b/packages/main/src/themes/Panel.css
index a68d4846f30a..f1d898278774 100644
--- a/packages/main/src/themes/Panel.css
+++ b/packages/main/src/themes/Panel.css
@@ -1,8 +1,8 @@
-:host(ui5-panel) {
+:host(ui5-panel:not([hidden])) {
 	display: block;
 }
 
-ui5-panel {
+ui5-panel:not([hidden]) {
 	display: block;
 }
 
diff --git a/packages/main/src/themes/RadioButton.css b/packages/main/src/themes/RadioButton.css
index 8ca422ab8c06..01f0af5efd97 100644
--- a/packages/main/src/themes/RadioButton.css
+++ b/packages/main/src/themes/RadioButton.css
@@ -1,11 +1,11 @@
-:host(ui5-radiobutton) {
+:host(ui5-radiobutton:not([hidden])) {
 	max-width: 100%;
 	text-overflow: ellipsis;
 	overflow: hidden;
 	display: inline-block;
 }
 
-ui5-radiobutton {
+ui5-radiobutton:not([hidden]) {
 	max-width: 100%;
 	text-overflow: ellipsis;
 	overflow: hidden;
diff --git a/packages/main/src/themes/Select.css b/packages/main/src/themes/Select.css
index bf8dad61702d..3a055dee6fdd 100644
--- a/packages/main/src/themes/Select.css
+++ b/packages/main/src/themes/Select.css
@@ -1,9 +1,9 @@
-:host(ui5-select) {
+:host(ui5-select:not([hidden])) {
 	display: inline-block;
 	width: 100%;
 }
 
-ui5-select {
+ui5-select:not([hidden]) {
 	display: inline-block;
 	width: 100%;
 }
diff --git a/packages/main/src/themes/ShellBar.css b/packages/main/src/themes/ShellBar.css
index 7ea75e71995e..71e2cd1601a6 100644
--- a/packages/main/src/themes/ShellBar.css
+++ b/packages/main/src/themes/ShellBar.css
@@ -1,9 +1,9 @@
-:host(ui5-shellbar) {
+:host(ui5-shellbar:not([hidden])) {
 	display: inline-block;
 	width: 100%;
 }
 
-ui5-shellbar {
+ui5-shellbar:not([hidden]) {
 	display: inline-block;
 	width: 100%;
 }
diff --git a/packages/main/src/themes/Switch.css b/packages/main/src/themes/Switch.css
index 8768d1d2f1bb..4d7a0269c20e 100644
--- a/packages/main/src/themes/Switch.css
+++ b/packages/main/src/themes/Switch.css
@@ -1,10 +1,10 @@
 
 
-:host(ui5-switch) {
+:host(ui5-switch:not([hidden])) {
 	display: inline-block;
 }
 
-ui5-switch {
+ui5-switch:not([hidden]) {
 	display: inline-block;
 }
 
diff --git a/packages/main/src/themes/TabContainer.css b/packages/main/src/themes/TabContainer.css
index bd43bf59c03d..f63c167da836 100644
--- a/packages/main/src/themes/TabContainer.css
+++ b/packages/main/src/themes/TabContainer.css
@@ -1,12 +1,12 @@
 /* ============================= */
 /* Global Base parameters        */
 /* ============================= */
-:host(ui5-tabcontainer) {
+:host(ui5-tabcontainer:not([hidden])) {
 	display: inline-block;
 	width: 100%;
 }
 
-ui5-tabcontainer {
+ui5-tabcontainer:not([hidden]) {
 	width: 100%;
 }
 
diff --git a/packages/main/src/themes/Table.css b/packages/main/src/themes/Table.css
index db4a4e1cae92..bbc876c38c07 100644
--- a/packages/main/src/themes/Table.css
+++ b/packages/main/src/themes/Table.css
@@ -1,9 +1,9 @@
-:host(ui5-table) {
+:host(ui5-table:not([hidden])) {
 	display: inline-block;
 	width: 100%;
 }
 
-ui5-table {
+ui5-table:not([hidden]) {
 	display: inline-block;
 	width: 100%;
 }
diff --git a/packages/main/src/themes/TableRow.css b/packages/main/src/themes/TableRow.css
index 29e0126d9986..136f003baf3c 100644
--- a/packages/main/src/themes/TableRow.css
+++ b/packages/main/src/themes/TableRow.css
@@ -1,9 +1,9 @@
-:host(ui5-table-row) {
+:host(ui5-table-row:not([hidden])) {
 	display: inline-block;
 	width: 100%;
 }
 
-ui5-table-row {
+ui5-table-row:not([hidden]) {
 	display: inline-block;
 	width: 100%;
 }
diff --git a/packages/main/src/themes/TextArea.css b/packages/main/src/themes/TextArea.css
index 9532141e4b77..f0c106f13777 100644
--- a/packages/main/src/themes/TextArea.css
+++ b/packages/main/src/themes/TextArea.css
@@ -1,8 +1,8 @@
-:host(ui5-textarea) {
+:host(ui5-textarea:not([hidden])) {
 	display: inline-block;
 }
 
-ui5-textarea {
+ui5-textarea:not([hidden]) {
 	display: inline-block;
 }
 
diff --git a/packages/main/src/themes/Timeline.css b/packages/main/src/themes/Timeline.css
index c5b490b159d2..5c121fbb43a5 100644
--- a/packages/main/src/themes/Timeline.css
+++ b/packages/main/src/themes/Timeline.css
@@ -1,5 +1,8 @@
-ui5-timeline,
-:host(ui5-timeline) {
+:host(ui5-timeline:not([hidden])) {
+	display: block;
+}
+
+ui5-timeline:not([hidden]) {
 	display: block;
 }
 
diff --git a/packages/main/src/themes/TimelineItem.css b/packages/main/src/themes/TimelineItem.css
index 3f58b4f48ad0..84108f4d5c5f 100644
--- a/packages/main/src/themes/TimelineItem.css
+++ b/packages/main/src/themes/TimelineItem.css
@@ -1,8 +1,8 @@
-:host(ui5-timeline-item) {
+:host(ui5-timeline-item:not([hidden])) {
 	display: block;
 }
 
-ui5-timeline-item {
+ui5-timeline-item:not([hidden]) {
 	display: block;
 }
 
diff --git a/packages/main/src/themes/Title.css b/packages/main/src/themes/Title.css
index 9adc6eb6d80d..9f19ce1744fe 100644
--- a/packages/main/src/themes/Title.css
+++ b/packages/main/src/themes/Title.css
@@ -1,10 +1,10 @@
-:host(ui5-title) {
+:host(ui5-title:not([hidden])) {
 	display: block;
 	max-width: 100%;
 	color: var(--sapUiGroupTitleTextColor);
 }
 
-ui5-title {
+ui5-title:not([hidden]) {
 	display: block;
 	overflow: hidden;
 	color: var(--sapUiGroupTitleTextColor);
diff --git a/packages/main/src/themes/ToggleButton.css b/packages/main/src/themes/ToggleButton.css
index ac97a10f81bd..f340225617f2 100644
--- a/packages/main/src/themes/ToggleButton.css
+++ b/packages/main/src/themes/ToggleButton.css
@@ -1,8 +1,8 @@
-:host(ui5-togglebutton) {
+:host(ui5-togglebutton:not([hidden])) {
 	display: inline-block;
 }
 
-ui5-togglebutton {
+ui5-togglebutton:not([hidden]) {
 	display: inline-block;
 }