diff --git a/sm-element.js b/sm-element.js
index 9f9202e..10aec68 100644
--- a/sm-element.js
+++ b/sm-element.js
@@ -123,6 +123,8 @@ class SMElement extends HTMLElement {
         if (this.getAttribute('state') !== this.__state) {
             this.setAttribute('state', this.__state);
         }
+        // render immediately the first time
+        this.render(this.data);
     }
     disconnectedCallback() {
         // nothing to do here. provided for subclasses calling super.disconnectedCallback
diff --git a/src/sm-element.ts b/src/sm-element.ts
index 3abbcb3..feb158a 100644
--- a/src/sm-element.ts
+++ b/src/sm-element.ts
@@ -161,6 +161,9 @@ class SMElement extends HTMLElement {
     if (this.getAttribute('state') !== this.__state) {
       this.setAttribute('state', this.__state);
     }
+    // render immediately the first time, so that elements
+    // can be accessed in connectedCallback()
+    this.render(this.data);
   }
 
   protected disconnectedCallback() {