feat(ejs): render and attach shadowroot in the same tick.

src/StyledElement.js

@@ -39,17 +39,6 @@ class StyledElement extends BaseElement {
                 return cssStyleSheet;
             });
         }
-
-        if (supportsAdoptingStyleSheets() && this._options.shadowRender) {
-            // adopting does only make sense in shadow dom. Fall back to append for light elements
-            this.adoptStyleSheets();
-
-            if (this._options.adoptGlobalStyles !== false) {
-                globalStylesStore.subscribe(() => {
-                    this.adoptStyleSheets();
-                });
-            }
-        }
     }
 
     /**
@@ -73,6 +62,26 @@ class StyledElement extends BaseElement {
         super.update(options);
     }
 
+    /**
+     * Start the adoption of external stylesheets
+     * adopt global styles from document
+     * subscribe to globalStylesStore for updates
+     * @returns { void }
+     */
+
+    initStyleAdoption() {
+        if (this._options.shadowRender && supportsAdoptingStyleSheets()) {
+            // adopting does only make sense in shadow dom. Fall back to append for light elements
+            this.adoptStyleSheets();
+
+            if (this._options.adoptGlobalStyles !== false) {
+                globalStylesStore.subscribe(() => {
+                    this.adoptStyleSheets();
+                });
+            }
+        }
+    }
+
     /**
      * Adopt stylesheets
      */

src/TemplateElement.js

@@ -28,10 +28,8 @@ class TemplateElement extends StyledElement {
 
     /**
      * Overrides the native `connectedCallback` of the HTMLElement to set up and initialize our element.
-     * This will attach a shadow DOM if the element is supposed to render in shadow DOM.
      */
     connectedCallback() {
-        if (this._options.shadowRender && !this.shadowRoot) this.attachShadow({ mode: 'open' });
         super.connectedCallback();
     }
 
@@ -54,8 +52,16 @@ class TemplateElement extends StyledElement {
 
     /**
      * Render the template to the root
+     * This will attach a shadow DOM if the element is supposed to render in shadow DOM.
      */
     renderTemplate() {
+        const firstRender = this._options.shadowRender && !this.shadowRoot;
+        if (firstRender) {
+            this.attachShadow({ mode: 'open' });
+            // init external stylesheets
+            this.initStyleAdoption();
+        }
+
         const template = this._template || this.template();
         render(template, this.getRoot());
     }