Add workaround for IE11 CSS properties

vaadin · Apr 23, 2019 · 14c4045 · 14c4045
1 parent 215adc8
commit 14c4045
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 4 deletions.
diff --git a/src/vaadin-notification.html b/src/vaadin-notification.html
@@ -411,6 +411,7 @@
             }
 
             this._animatedAppendNotificationCard();
+            setTimeout(() => this._updateShadyButtonStyles());
           } else if (this._card) {
             this._closeNotificationCard();
           }
@@ -548,6 +549,27 @@
             }
           }
         }
+
+        _updateShadyButtonStyles() {
+          // ShadyCSS doesn't propagate CSS properties to slotted children,
+          // so this is done manually to allow vaadin-buttons to be themed
+          // correctly on IE11
+          if (window.ShadyCSS && !this.__buttonStylesPending) {
+            customElements.whenDefined('vaadin-button').then(() => {
+              Array.from(this._card.querySelectorAll('*')).filter(child => child instanceof customElements.get('vaadin-button')).forEach(btn => {
+                const styles = ['--_lumo-button-color', '--_lumo-button-background-color', '--_lumo-button-primary-color', '--_lumo-button-primary-background-color']
+                  .reduce((obj, propName) => {
+                    const propValue = ShadyCSS.getComputedStyleValue(this._card, propName);
+                    propValue && (obj[propName] = propValue);
+                    return obj;
+                  }, {});
+                btn.updateStyles(styles);
+              });
+              this.__buttonStylesPending = false;
+            });
+            this.__buttonStylesPending = true;
+          }
+        }
       }
 
       customElements.define(NotificationContainer.is, NotificationContainer);

diff --git a/theme/lumo/vaadin-notification-styles.html b/theme/lumo/vaadin-notification-styles.html
@@ -137,7 +137,7 @@
         color: var(--lumo-primary-contrast-color);
       }
 
-      :host([theme~="primary"]) [part="content"] {
+      :host([theme~="primary"]) {
         --_lumo-button-background-color: var(--lumo-shade-20pct);
         --_lumo-button-color: var(--lumo-primary-contrast-color);
         --_lumo-button-primary-background-color: var(--lumo-primary-contrast-color);
@@ -149,7 +149,7 @@
         color: var(--lumo-base-color);
       }
 
-      :host([theme~="contrast"]) [part="content"] {
+      :host([theme~="contrast"]) {
         --_lumo-button-background-color: var(--lumo-contrast-20pct);
         --_lumo-button-color: var(--lumo-base-color);
         --_lumo-button-primary-background-color: var(--lumo-base-color);
@@ -161,7 +161,7 @@
         color: var(--lumo-success-contrast-color);
       }
 
-      :host([theme~="success"]) [part="content"] {
+      :host([theme~="success"]) {
         --_lumo-button-background-color: var(--lumo-shade-20pct);
         --_lumo-button-color: var(--lumo-success-contrast-color);
         --_lumo-button-primary-background-color: var(--lumo-success-contrast-color);
@@ -173,7 +173,7 @@
         color: var(--lumo-error-contrast-color);
       }
 
-      :host([theme~="error"]) [part="content"] {
+      :host([theme~="error"]) {
         --_lumo-button-background-color: var(--lumo-shade-20pct);
         --_lumo-button-color: var(--lumo-error-contrast-color);
         --_lumo-button-primary-background-color: var(--lumo-error-contrast-color);