feat(templating): support more standard attrs

- data- <-> dataset.
- for <-> htmlFor
- class <-> className

examples/templating/index.js

@@ -6,9 +6,19 @@ export class Counter extends WebComponent {
   };
   get template() {
     return html`
-      <button class="hey" id="btn" 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;"
+        about="Elephant"
+      >
         <span>${this.props.count}</span>
       </button>
+      <form style="margin: 1em 0;">
+        <label data-my-name="Ayo" for="the-input">Name</label>
+        <input id="the-input" type="foo" value="Name:" />
+      </form>
     `;
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-component-base",
-  "version": "2.0.0-beta.15",
+  "version": "2.0.0-beta.16",
   "description": "A zero-dependency, ~600 Bytes (minified & gzipped), JS base class for creating reactive custom elements easily",
   "type": "module",
   "exports": {

src/utils/create-element.js

@@ -1,3 +1,5 @@
+import { getCamelCase } from "./get-camel-case.js";
+
 export function createElement(tree) {
   if (!tree.type) {
     const leaves = typeof tree === "object" ? Object.keys(tree) : [];
@@ -9,9 +11,17 @@ export function createElement(tree) {
     const el = document.createElement(tree.type);
     if (tree.props) {
         Object.keys(tree.props).forEach(prop => {
-            let domProp = prop.startsWith('on') ? prop.toLowerCase() : prop;
+            let domProp = prop.toLowerCase();
-            if (domProp === 'class') domProp = 'className';
+            if (domProp.startsWith('data-')) {
-            el[domProp] = tree.props[prop]
+              const dataProp = domProp.replace('data-', '');
+              el.dataset[getCamelCase(dataProp)] = tree.props[prop];
+            } else {
+              switch(domProp) {
+                case 'class': domProp = 'className'; break;
+                case 'for': domProp = 'htmlFor'; break;
+              }
+              el[domProp] = tree.props[prop]
+            }
         })
     }
     tree.children?.forEach((child) => {