diff --git a/demo/HelloWorld.mjs b/demo/HelloWorld.mjs index fd9977d..beab6b4 100644 --- a/demo/HelloWorld.mjs +++ b/demo/HelloWorld.mjs @@ -1,15 +1,15 @@ -import WebComponent from "../src/index.mjs"; +import WebComponent from "../src/index.js"; export class HelloWorld extends WebComponent { name = "World"; emotion = "excited"; - static properties = ["name", "emotion"]; + static properties = ["data-name", "emotion"]; onInit() { let count = 0; this.onclick = () => { - this.setAttribute("name", `Clicked ${++count}x!`); + this.setAttribute("data-name", `Clicked ${++count}x!`); }; } @@ -23,7 +23,7 @@ export class HelloWorld extends WebComponent { } get template() { - return ``; } diff --git a/demo/index.html b/demo/index.html index 275e5d7..13c676a 100644 --- a/demo/index.html +++ b/demo/index.html @@ -8,7 +8,7 @@ - +

diff --git a/src/WebComponent.mjs b/src/WebComponent.mjs index 6ed16e1..fadf187 100644 --- a/src/WebComponent.mjs +++ b/src/WebComponent.mjs @@ -57,8 +57,11 @@ export class WebComponent extends HTMLElement { * @param {any} currentValue */ attributeChangedCallback(property, previousValue, currentValue) { + const camelCaps = (kebab) => + kebab.replace(/-./g, (x) => x[1].toUpperCase()); if (previousValue !== currentValue) { this[property] = currentValue; + this[camelCaps(property)] = currentValue; this.render(); this.onChanges({ property, previousValue, currentValue }); }