diff --git a/bower.json b/bower.json
index 6c17f13..887def0 100644
--- a/bower.json
+++ b/bower.json
@@ -37,7 +37,7 @@
     "iron-demo-helpers": "^2.0.0",
     "webcomponentsjs": "^1.0.0",
     "web-component-tester": "^6.1.5",
-    "vaadin-demo-helpers": "vaadin/vaadin-demo-helpers#^2.0.0"
+    "vaadin-demo-helpers": "vaadin/vaadin-demo-helpers#^2.2.0"
   },
   "resolutions": {
     "vaadin-element-mixin": "^2.0.0"
diff --git a/demo/element-basic-demos.html b/demo/element-basic-demos.html
index f00dc4e..29898e3 100644
--- a/demo/element-basic-demos.html
+++ b/demo/element-basic-demos.html
@@ -8,9 +8,15 @@
 
 
     <h3>Sample example</h3>
-    <vaadin-demo-snippet id="element-basic-demos-sample-example">
+    <vaadin-demo-snippet id="element-basic-demos-sample-example" when-defined="vaadin-element">
       <template preserve-content>
-        <vaadin-element>Foobar</vaadin-element>
+        <vaadin-element></vaadin-element>
+        <script>
+          window.addDemoReadyListener('#element-basic-demos-sample-example', function(document) {
+            const element = document.querySelector('vaadin-element');
+            element.textContent = 'Foobar';
+          });
+        </script>
       </template>
     </vaadin-demo-snippet>