diff --git a/examples/templating/index.js b/examples/templating/index.js
index 88bc6d7..d268e43 100644
--- a/examples/templating/index.js
+++ b/examples/templating/index.js
@@ -6,7 +6,7 @@ export class Counter extends WebComponent {
   };
   get template() {
     return html`
-      <button onClick=${() => ++this.props.count} style="background-color: black; color: white;">
+      <button class="hey" id="btn" onclick=${() => ++this.props.count} style="background-color: black; color: white;">
         <span>${this.props.count}</span>
       </button>
     `;
diff --git a/package.json b/package.json
index 6f3ede5..0cd15d8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "web-component-base",
-  "version": "2.0.0-beta.14",
+  "version": "2.0.0-beta.15",
   "description": "A zero-dependency, ~600 Bytes (minified & gzipped), JS base class for creating reactive custom elements easily",
   "type": "module",
   "exports": {
diff --git a/src/utils/create-element.js b/src/utils/create-element.js
index 46a777c..601f102 100644
--- a/src/utils/create-element.js
+++ b/src/utils/create-element.js
@@ -7,8 +7,13 @@ export function createElement(tree) {
     return document.createTextNode(tree);
   } else {
     const el = document.createElement(tree.type);
-    if (tree.props)
-        Object.keys(tree.props).forEach(prop => el[prop.toLowerCase()] = tree.props[prop])
+    if (tree.props) {
+        Object.keys(tree.props).forEach(prop => {
+            let domProp = prop.startsWith('on') ? prop.toLowerCase() : prop;
+            if (domProp === 'class') domProp = 'className';
+            el[domProp] = tree.props[prop]
+        })
+    }
     tree.children?.forEach((child) => {
       const childEl = createElement(child);
       if (childEl) {