diff --git a/BetterHTMLElement.js b/BetterHTMLElement.js index b9aa516..b0b9c5a 100644 --- a/BetterHTMLElement.js +++ b/BetterHTMLElement.js @@ -1,5 +1,5 @@ export class BetterHTMLElement extends HTMLElement { - attributeChangedCallback(name, old, value) { this[name+"Changed"](value, old) } + attributeChangedCallback(name, old, value) { if (name+"Changed" in this) this[name+"Changed"](value, old) } // Array of connected callbacks #connected = []; @@ -17,31 +17,47 @@ export class BetterHTMLElement extends HTMLElement { this.#connected = []; } + setContent(...content) { + this.innerHTML = "" + content.forEach( element => this.appendChild(element) ) + } + set content(content) { + this.setContent(content) + } + // Fancier way to register an element // TODO: Unregister old names first // TODO: Register name internally static set tagName(name) { customElements.define(name, this) } // Adds property/attribute mappings to the object. - static addProps(fields = this.observedAttributes) { - fields.forEach( attr => Object.defineProperty(this.prototype, attr, { + static initialize(name = this.name) { + const names = Object + .getOwnPropertyNames(this.prototype) + .filter(name => name.search(/Changed$/)+1) + .map(name => name.replace(/Changed$/, '')) + Object.defineProperty(this, "observedAttributes", { + get() { return names } + }) + names.forEach( attr => Object.defineProperty(this.prototype, attr, { get() { return this.getAttribute(attr) }, set(val) { this.setAttribute(attr, val) } })) + name = name.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase() + customElements.define(name, this) + return name } } /* Example: class FooBar extends BetterHTMLElement { - static get observedAttributes() { return [ "name" ] } - constructor() { super(); this.attachShadow({mode: "open"}); this.shadowRoot.innerHTML = `

Hello,

` } + nameChanged(name) { this.shadowRoot.querySelector("#name").innerHTML=name; } } - FooBar.addProps() - FooBar.tagName = "foo-bar" + FooBar.initialize() */