From 669fee1d49f0e8ed3dde82eaf943b2057899ce62 Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Sat, 9 Dec 2023 02:05:32 +0100
Subject: [PATCH] feat(templating): only assign standard DOM props

---
 examples/templating/index.js | 4 ++--
 package.json                 | 2 +-
 src/utils/create-element.js  | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/examples/templating/index.js b/examples/templating/index.js
index 6cbce41..a82c954 100644
--- a/examples/templating/index.js
+++ b/examples/templating/index.js
@@ -8,9 +8,9 @@ export class Counter extends WebComponent {
     return html`
       <button
         class="hey"
-        ID="btn"
+        id="btn"
         onClick=${() => ++this.props.count}
-        style="background-color: black; color: white;"
+        style="background-color: green; color: white;"
         about="Elephant"
       >
         <span>${this.props.count}</span>
diff --git a/package.json b/package.json
index 957fafa..764e04e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "web-component-base",
-  "version": "2.0.0-beta.16",
+  "version": "2.0.0-beta.17",
   "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 2e7e285..656736b 100644
--- a/src/utils/create-element.js
+++ b/src/utils/create-element.js
@@ -20,7 +20,7 @@ export function createElement(tree) {
                 case 'class': domProp = 'className'; break;
                 case 'for': domProp = 'htmlFor'; break;
               }
-              el[domProp] = tree.props[prop]
+              if (domProp in el) el[domProp] = tree.props[prop]
             }
         })
     }