diff --git a/package-lock.json b/package-lock.json
index ead45c9..40bc9d1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3997,9 +3997,9 @@
       }
     },
     "packages/config/node_modules/@mcflyjs/core": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/@mcflyjs/core/-/core-0.3.3.tgz",
-      "integrity": "sha512-owZ7ej35juuNn+1hE4VClq49QkGys/cz0+GiDWOUZ8L+FNL3yDSDtXT8gGPbOJh9X/dHN64iZSCf+6PosehBVA==",
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/@mcflyjs/core/-/core-0.3.4.tgz",
+      "integrity": "sha512-MOclUpMi1csfYuEfImKi2yFeB0QrbFuyR/Kk4oIpjn9Vfa3Oha2tGDDKjNnaj/mEM8JZulOZ8WErLciRGOALgw==",
       "dependencies": {
         "esprima": "^4.0.1",
         "h3": "^1.8.2",
@@ -4008,7 +4008,7 @@
     },
     "packages/core": {
       "name": "@mcflyjs/core",
-      "version": "0.3.4",
+      "version": "0.4.0",
       "license": "MIT",
       "dependencies": {
         "esprima": "^4.0.1",
@@ -4072,9 +4072,9 @@
       }
     },
     "templates/basic/node_modules/@mcflyjs/core": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/@mcflyjs/core/-/core-0.3.3.tgz",
-      "integrity": "sha512-owZ7ej35juuNn+1hE4VClq49QkGys/cz0+GiDWOUZ8L+FNL3yDSDtXT8gGPbOJh9X/dHN64iZSCf+6PosehBVA==",
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/@mcflyjs/core/-/core-0.3.4.tgz",
+      "integrity": "sha512-MOclUpMi1csfYuEfImKi2yFeB0QrbFuyR/Kk4oIpjn9Vfa3Oha2tGDDKjNnaj/mEM8JZulOZ8WErLciRGOALgw==",
       "dependencies": {
         "esprima": "^4.0.1",
         "h3": "^1.8.2",
diff --git a/packages/core/event-handler.js b/packages/core/event-handler.js
index f4b5694..0742d77 100644
--- a/packages/core/event-handler.js
+++ b/packages/core/event-handler.js
@@ -142,8 +142,7 @@ async function buildRegistry(usedCustomElements, type, storage) {
         !isBaseClassImported &&
         content.toString().includes("extends WebComponent")
       ) {
-        const baseClassImport = `import { WebComponent } from "https://unpkg.com/web-component-base@1.11.4/WebComponent.js";`;
-
+        const baseClassImport = `import { WebComponent } from "https://unpkg.com/web-component-base@1.12.2/WebComponent.js";`;
         registryScript += baseClassImport;
         isBaseClassImported = true;
       }
diff --git a/packages/core/package.json b/packages/core/package.json
index bf95612..ecc04b2 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mcflyjs/core",
-  "version": "0.3.4",
+  "version": "0.4.0",
   "description": "McFly core package",
   "type": "module",
   "main": "index.js",
diff --git a/site/src/components/my-hello-world.js b/site/src/components/my-hello-world.js
index 3f1b822..9b23a35 100644
--- a/site/src/components/my-hello-world.js
+++ b/site/src/components/my-hello-world.js
@@ -3,16 +3,14 @@
  * @see https://ayco.io/n/web-component-base
  */
 class HelloWorld extends WebComponent {
-  dataName = 'World';
-
-  static properties = ["data-name"];
+  static properties = ["my-name"];
 
   onInit() {
     let count = 0;
-    this.onclick = () => this.dataset.name = `Clicked ${++count}x`;
+    this.onclick = () => this.props.myName = `Clicked ${++count}x`;
   }
 
   get template() {
-    return `<button style="cursor:pointer">Hello ${this.dataName}!</button>`;
+    return `<button style="cursor:pointer">Hello ${this.props.myName ?? 'World'}!</button>`;
   }
 }
diff --git a/templates/basic/src/components/my-hello-world.js b/templates/basic/src/components/my-hello-world.js
index ae55f22..9444e76 100644
--- a/templates/basic/src/components/my-hello-world.js
+++ b/templates/basic/src/components/my-hello-world.js
@@ -3,20 +3,17 @@
  * @see https://ayco.io/n/web-component-base
  */
 class MyHelloWorld extends WebComponent {
-  // initialize prop
-  dataName = 'World';
-
   // tell browser which props to cause render
-  static properties = ["data-name"];
+  static properties = ["my-name"];
 
   // Triggered when the component is connected to the DOM
   onInit() {
     let count = 0;
-    this.onclick = () => this.dataset.name = `Clicked ${++count}x`
+    this.onclick = () => this.props.myName = `Clicked ${++count}x`
   }
 
   // give readonly template
   get template() {
-    return `<button style="cursor:pointer">Hello ${this.dataName}!</button>`;
+    return `<button style="cursor:pointer">Hello ${this.props.myName ?? 'World'}!</button>`;
   }
 }