fix(ui5-messagestrip): fix layout in ie (#353)

Author: fifoosid

packages/main/src/MessageStripTemplateContext.js

@@ -8,7 +8,7 @@ class MessageStripTemplateContext {
 					"ui5-messagestrip-close-icon": true,
 				},
 				main: {
-					"ui5-messagestrip": true,
+					"ui5-messagestrip-root": true,
 					"ui5-messagestrip-icon--hidden": state.hideIcon,
 					"ui5-messagestrip-close-icon--hidden": state.hideCloseButton,
 					[MessageStripTemplateContext.getTypeClasses(state)]: true,

packages/main/src/themes/MessageStrip.css

@@ -14,7 +14,7 @@ span[data-sap-ui-wc-root] {
 	display: flex;
 }
 
-.ui5-messagestrip {
+.ui5-messagestrip-root {
 	width: 100%;
 	height: 100%;
 	display: flex;
@@ -27,21 +27,21 @@ span[data-sap-ui-wc-root] {
 	position: relative;
 }
 
-.ui5-messagestrip .ui5-messagestrip-icon {
+.ui5-messagestrip-root .ui5-messagestrip-icon {
 	width: var(--_ui5_messagestrip_icon_width);
 	box-sizing: border-box;
 	position: absolute;
 	top: var(--_ui5_messagestrip_icon_top);
 	left: 0px;
 }
 
-.ui5-messagestrip .ui5-messagestrip-text {
+.ui5-messagestrip -root.ui5-messagestrip-text {
 	width: 100%;
 	color: var(--sapTextColor);
 	line-height: 1.2;
 }
 
-.ui5-messagestrip ui5-button {
+.ui5-messagestrip-root ui5-button {
 	height: var(--_ui5_messagestrip_button_height);
 	border-width: var(--_ui5_messagestrip_button_border_width);
 	border-style: var(--_ui5_messagestrip_button_border_style);

packages/main/test/sap/ui/webcomponents/main/samples/MessageStrip.sample.html

@@ -21,6 +21,7 @@
 		}
 	</script>
 
+	<script src="../../../../../../webcomponentsjs/webcomponents-loader.js"></script>
 	<script src="../../../../../../resources/sap/ui/webcomponents/main/bundle.esm.js"
 		type="module"
 	>