perf: avoid calling getPropertyValue during render

src/components/date-picker/date-picker.tsx

@@ -13,6 +13,7 @@ import { DateType, Languages } from '../date-picker/date.types';
 import { InputType } from '../input-field/input-field.types';
 import { DateFormatter } from './dateFormatter';
 import { MDCTextField } from '@material/textfield';
+import { getComputedStyles } from '../../util/computed-styles';
 
 // tslint:disable:no-duplicate-string
 const nativeTypeForConsumerType: { [key: string]: InputType } = {
@@ -153,6 +154,9 @@ export class DatePicker {
     @State()
     private showPortal = false;
 
+    @State()
+    private computedStyles: Record<string, string> = {};
+
     private useNative: boolean;
     private nativeType: InputType;
     private nativeFormat: string;
@@ -185,6 +189,16 @@ export class DatePicker {
         this.updateInternalFormatAndType();
     }
 
+    public connectedCallback() {
+        this.setComputedStyles();
+    }
+
+    private async setComputedStyles() {
+        this.computedStyles = await getComputedStyles(this.host, [
+            '--dropdown-z-index',
+        ]);
+    }
+
     public disconnectedCallback() {
         this.hideCalendar();
     }
@@ -214,10 +228,7 @@ export class DatePicker {
             );
         }
 
-        const dropdownZIndex = getComputedStyle(this.host).getPropertyValue(
-            '--dropdown-z-index',
-        );
-
+        const dropdownZIndex = this.computedStyles['--dropdown-z-index'];
         const formatter = this.formatter || this.formatValue;
 
         return [

src/components/input-field/input-field.tsx

@@ -25,6 +25,7 @@ import { JSXBase } from '@stencil/core/internal';
 import { createRandomString } from '../../util/random-string';
 import { LimelListCustomEvent } from '../../components';
 import { globalConfig } from '../../global/config';
+import { getComputedStyles } from '../../util/computed-styles';
 
 interface LinkProperties {
     href: string;
@@ -247,6 +248,9 @@ export class InputField {
     @State()
     public showCompletions: boolean = false;
 
+    @State()
+    private computedStyles: Record<string, string> = {};
+
     private inputElement?: HTMLInputElement | HTMLTextAreaElement;
     private mdcTextField: MDCTextField;
     private completionsList: ListItem[] = [];
@@ -264,6 +268,13 @@ export class InputField {
 
     public connectedCallback() {
         this.initialize();
+        this.setComputedStyles();
+    }
+
+    private async setComputedStyles() {
+        this.computedStyles = await getComputedStyles(this.limelInputField, [
+            '--dropdown-z-index',
+        ]);
     }
 
     public componentDidLoad() {
@@ -861,9 +872,7 @@ export class InputField {
             return;
         }
 
-        const dropdownZIndex = getComputedStyle(
-            this.limelInputField,
-        ).getPropertyValue('--dropdown-z-index');
+        const dropdownZIndex = this.computedStyles['--dropdown-z-index'];
 
         return (
             <limel-portal

src/components/menu/menu.tsx

@@ -9,7 +9,7 @@ import {
     State,
 } from '@stencil/core';
 import { createRandomString } from '../../util/random-string';
-import { zipObject, isFunction } from 'lodash-es';
+import { isFunction } from 'lodash-es';
 import {
     LimelBreadcrumbsCustomEvent,
     LimelInputFieldCustomEvent,
@@ -32,6 +32,7 @@ import {
     ARROW_UP,
     TAB,
 } from '../../util/keycodes';
+import { getComputedStyles } from '../../util/computed-styles';
 
 interface MenuCrumbItem extends BreadcrumbsItem {
     menuItem?: MenuItem;
@@ -192,6 +193,9 @@ export class Menu {
     @State()
     private searchResults: Array<MenuItem | ListSeparator> | null;
 
+    @State()
+    private computedStyles: Record<string, string> = {};
+
     private list: HTMLLimelMenuListElement;
     private searchInput: HTMLLimelInputFieldElement;
     private portalId: string;
@@ -202,6 +206,24 @@ export class Menu {
         this.portalId = createRandomString();
     }
 
+    public connectedCallback() {
+        this.setComputedStyles();
+    }
+
+    private async setComputedStyles() {
+        const propertyNames = [
+            '--menu-surface-width',
+            '--list-grid-item-max-width',
+            '--list-grid-item-min-width',
+            '--list-grid-gap',
+            '--notification-badge-background-color',
+            '--notification-badge-text-color',
+            '--dropdown-z-index',
+        ] as const;
+
+        this.computedStyles = await getComputedStyles(this.host, propertyNames);
+    }
+
     public componentDidRender() {
         const slotElement = this.host.shadowRoot.querySelector('slot');
         slotElement.assignedElements().forEach(this.setTriggerAttributes);
@@ -210,9 +232,7 @@ export class Menu {
     public render() {
         const cssProperties = this.getCssProperties();
 
-        const dropdownZIndex = getComputedStyle(this.host).getPropertyValue(
-            '--dropdown-z-index',
-        );
+        const dropdownZIndex = this.computedStyles['--dropdown-z-index'];
 
         const menuSurfaceWidth = this.getMenuSurfaceWidth(
             cssProperties['--menu-surface-width'],
@@ -653,22 +673,10 @@ export class Menu {
     };
 
     private getCssProperties() {
-        const propertyNames = [
-            '--menu-surface-width',
-            '--list-grid-item-max-width',
-            '--list-grid-item-min-width',
-            '--list-grid-gap',
-            '--notification-badge-background-color',
-            '--notification-badge-text-color',
-        ] as const;
-        const style = getComputedStyle(this.host);
-        const values = propertyNames.map((property) => {
-            return style.getPropertyValue(property);
-        });
-
-        type PropName = (typeof propertyNames)[number];
-
-        return zipObject(propertyNames, values) as Record<PropName, string>;
+        return {
+            ...this.computedStyles,
+            '--dropdown-z-index': undefined,
+        };
     }
 
     private setListElement = (element: HTMLLimelMenuListElement) => {

src/components/picker/picker.tsx

@@ -23,6 +23,7 @@ import {
 import { getIconFillColor, getIconName } from '../icon/get-icon-props';
 import { PickerValue } from './value.types';
 import { DebouncedFunc, debounce } from 'lodash-es';
+import { getComputedStyles } from '../../util/computed-styles';
 
 const SEARCH_DEBOUNCE = 300;
 const CHIP_SET_TAG_NAME = 'limel-chip-set';
@@ -205,6 +206,9 @@ export class Picker {
     @State()
     private chips: Chip[] = [];
 
+    @State()
+    private computedStyles: Record<string, string> = {};
+
     @Element()
     private host: HTMLLimelPickerElement;
 
@@ -241,6 +245,16 @@ export class Picker {
         this.chipSet = this.host.shadowRoot.querySelector(CHIP_SET_TAG_NAME);
     }
 
+    public connectedCallback() {
+        this.setComputedStyles();
+    }
+
+    private async setComputedStyles() {
+        this.computedStyles = await getComputedStyles(this.host, [
+            '--dropdown-z-index',
+        ]);
+    }
+
     public disconnectedCallback() {
         this.debouncedSearch.cancel();
     }
@@ -489,9 +503,7 @@ export class Picker {
     }
 
     private renderPortal(content: any[] = []) {
-        const dropdownZIndex = getComputedStyle(this.host).getPropertyValue(
-            '--dropdown-z-index',
-        );
+        const dropdownZIndex = this.computedStyles['--dropdown-z-index'];
 
         return (
             <limel-portal

src/components/popover/popover.tsx

@@ -6,12 +6,13 @@ import {
     Event,
     EventEmitter,
     Watch,
+    State,
 } from '@stencil/core';
 import { createRandomString } from '../../util/random-string';
-import { zipObject } from 'lodash-es';
 import { portalContains } from '../portal/contains';
 import { ESCAPE } from '../../util/keycodes';
 import { OpenDirection } from '../menu/menu.types';
+import { getComputedStyles } from '../../util/computed-styles';
 
 /**
  * A popover is an impermanent layer that is displayed on top of other content
@@ -82,6 +83,9 @@ export class Popover {
     @Event()
     private close: EventEmitter<void>;
 
+    @State()
+    private computedStyles: Record<string, string> = {};
+
     @Element()
     private host: HTMLLimelPopoverElement;
 
@@ -97,6 +101,21 @@ export class Popover {
         this.setupGlobalHandlers();
     }
 
+    public connectedCallback() {
+        this.setComputedStyles();
+    }
+
+    private async setComputedStyles() {
+        const propertyNames = [
+            '--popover-surface-width',
+            '--popover-body-background-color',
+            '--popover-border-radius',
+            '--popover-box-shadow',
+            '--popover-z-index',
+        ] as const;
+        this.computedStyles = await getComputedStyles(this.host, propertyNames);
+    }
+
     public componentWillLoad() {
         this.setupGlobalHandlers();
     }
@@ -120,9 +139,7 @@ export class Popover {
 
     public render() {
         const cssProperties = this.getCssProperties();
-        const popoverZIndex = getComputedStyle(this.host).getPropertyValue(
-            '--popover-z-index',
-        );
+        const popoverZIndex = this.computedStyles['--popover-z-index'];
 
         return (
             <div class="trigger-anchor">
@@ -153,18 +170,10 @@ export class Popover {
     }
 
     private getCssProperties() {
-        const propertyNames = [
-            '--popover-surface-width',
-            '--popover-body-background-color',
-            '--popover-border-radius',
-            '--popover-box-shadow',
-        ];
-        const style = getComputedStyle(this.host);
-        const values = propertyNames.map((property) => {
-            return style.getPropertyValue(property);
-        });
-
-        return zipObject(propertyNames, values);
+        return {
+            ...this.computedStyles,
+            '--popover-z-index': undefined,
+        };
     }
 
     private handleGlobalKeyPress = (event: KeyboardEvent) => {

src/components/select/select.tsx

@@ -17,6 +17,7 @@ import { ENTER, SPACE } from '../../util/keycodes';
 import { isMultiple } from '../../util/multiple';
 import { createRandomString } from '../../util/random-string';
 import { SelectTemplate, triggerIconColorWarning } from './select.template';
+import { getComputedStyles } from '../../util/computed-styles';
 
 /**
  * @exampleComponent limel-example-select
@@ -110,6 +111,9 @@ export class Select {
     @State()
     private menuOpen: boolean = false;
 
+    @State()
+    private computedStyles: Record<string, string> = {};
+
     private hasChanged: boolean = false;
     private checkValid: boolean = false;
     private mdcSelectHelperText: MDCSelectHelperText;
@@ -130,6 +134,13 @@ export class Select {
 
     public connectedCallback() {
         this.initialize();
+        this.setComputedStyles();
+    }
+
+    private async setComputedStyles() {
+        this.computedStyles = await getComputedStyles(this.host, [
+            '--dropdown-z-index',
+        ]);
     }
 
     public componentWillLoad() {
@@ -179,9 +190,7 @@ export class Select {
     }
 
     public render() {
-        const dropdownZIndex = getComputedStyle(this.host).getPropertyValue(
-            '--dropdown-z-index',
-        );
+        const dropdownZIndex = this.computedStyles['--dropdown-z-index'];
 
         return (
             <SelectTemplate

src/components/tooltip/tooltip.tsx

@@ -4,6 +4,7 @@ import { createRandomString } from '../../util/random-string';
 import { OpenDirection } from '../menu/menu.types';
 import { getOwnerElement } from './getOwnerElement';
 import { TooltipTimer } from './tooltipTimer';
+import { getComputedStyles } from '../../util/computed-styles';
 
 const DEFAULT_MAX_LENGTH = 50;
 
@@ -98,6 +99,9 @@ export class Tooltip {
     @State()
     private open: boolean;
 
+    @State()
+    private computedStyles: Record<string, string> = {};
+
     private portalId: string;
     private tooltipId: string;
     private ownerElement: HTMLElement;
@@ -116,16 +120,21 @@ export class Tooltip {
         this.ownerElement = getOwnerElement(this.elementId, this.host);
         this.setOwnerAriaLabel();
         this.addListeners();
+        this.setComputesdStyles();
+    }
+
+    private async setComputesdStyles() {
+        this.computedStyles = await getComputedStyles(this.host, [
+            '--tooltip-z-index',
+        ]);
     }
 
     public disconnectedCallback() {
         this.removeListeners();
     }
 
     public render(): JSX.Element {
-        const tooltipZIndex = getComputedStyle(this.host).getPropertyValue(
-            '--tooltip-z-index',
-        );
+        const tooltipZIndex = this.computedStyles['--tooltip-z-index'];
 
         return (
             <div class="trigger-anchor">