Merge pull request #657 from HelixDesignSystem/v0.18.x-fix-ShadyCSS-styleElement

[v0.18.x] fix(HXElement): call ShadyCSS away from constructor

Author: 100stacks

src/interfaces/HXElement/index.js

@@ -111,6 +111,7 @@ export class HXElement extends HTMLElement {
         this._$tabIndex = this.getAttribute('tabindex');
         this.$upgradeProperty('disabled');
         this.setAttribute('hx-defined', '');
+        this._$styleElement();
         this.$onConnect();
     }
 
@@ -317,10 +318,23 @@ export class HXElement extends HTMLElement {
         if (this.constructor.template) {
             let _template = this._$prepareTemplate(this.constructor.template);
             this.attachShadow({ mode: 'open' });
-            if (window.ShadyCSS) {
-                ShadyCSS.styleElement(this);
-            }
             this.shadowRoot.appendChild(_template.content.cloneNode(true));
         }
     }//_$setupShadowDOM()
+
+    /**
+     * @description
+     * Style the element using ShadyCSS, if needed.
+     *
+     * @note: has the potential to modify the `[class]` attribute
+     * of the element, so avoid running in the constructor.
+     */
+    _$styleElement () {
+        // short circuit if browser natively supports ShadowDOM
+        if (!window.ShadyCSS) {
+            return;
+        }
+
+        ShadyCSS.styleElement(this);
+    }
 }