fix(framework): CSS Vars in Static Styles work on IE11 (#1440)

The `createComponentStyleTag` method did not take into account Static Area CSS and did not inject it in the head. Instead, this CSS went to the `ui5-static-area-item` like on normal browsers. However, it wasn't processed there so CSS vars were not replaced.
The fix:
 - Do not inject any CSS in `_updateFragment` for IE11 (if `shadyDOM` is `true`). 
 - Inject the static area CSS along with the normal CSS in `createComponentStyleTag` instead, where it will be processed like the regular CSS
 - Finally, add a static getter for static area CSS in `UI5Element.js` to ensure it's always a string.

Author: vladitasev

packages/base/src/StaticAreaItem.js

@@ -22,7 +22,7 @@ class StaticAreaItem {
 	 */
 	_updateFragment() {
 		const renderResult = this.ui5ElementContext.constructor.staticAreaTemplate(this.ui5ElementContext),
-			stylesToAdd = this.ui5ElementContext.constructor.staticAreaStyles || false;
+			stylesToAdd = window.ShadyDOM ? false : this.ui5ElementContext.constructor.staticAreaStyles;
 
 		if (!this.staticAreaItemDomRef) {
 			// Initial rendering of fragment

packages/base/src/UI5Element.js

@@ -820,6 +820,14 @@ class UI5Element extends HTMLElement {
 		return "";
 	}
 
+	/**
+	 * Returns the Static Area CSS for this UI5 Web Component Class
+	 * @protected
+	 */
+	static get staticAreaStyles() {
+		return "";
+	}
+
 	/**
 	 * Registers a UI5 Web Component in the browser window object
 	 * @public

packages/base/src/theming/createComponentStyleTag.js

@@ -5,6 +5,15 @@ import { ponyfillNeeded, schedulePonyfill } from "./CSSVarsPonyfill.js";
 
 const IEStyleSet = new Set();
 
+const getStaticStyle = ElementClass => {
+	let componentStaticStyles = ElementClass.staticAreaStyles;
+	if (Array.isArray(componentStaticStyles)) {
+		componentStaticStyles = componentStaticStyles.join(" ");
+	}
+
+	return componentStaticStyles;
+};
+
 /**
  * Creates the needed CSS for a web component class in the head tag
  * Note: IE11, Edge
@@ -18,6 +27,14 @@ const createComponentStyleTag = ElementClass => {
 
 	let cssContent = getEffectiveStyle(ElementClass);
 	cssContent = adaptCSSForIE(cssContent, tag);
+
+	// Append static CSS, if any, for IE
+	let staticCssContent = getStaticStyle(ElementClass);
+	if (staticCssContent) {
+		staticCssContent = adaptCSSForIE(staticCssContent, "ui5-static-area-item");
+		cssContent = `${cssContent} ${staticCssContent}`;
+	}
+
 	createStyleInHead(cssContent, {
 		"data-ui5-element-styles": tag,
 		"disabled": "disabled",