Refactor BetterHTMLElement with more meta-magic ✨

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) {
+	static initialize(name = this.name) {
-		fields.forEach( attr => Object.defineProperty(this.prototype, attr, {
+		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 = `<h1>Hello, <span id="name"></span></h1>`
 		}
+
 		nameChanged(name) { this.shadowRoot.querySelector("#name").innerHTML=name; }
 	}
-	FooBar.addProps()
+	FooBar.initialize()
-	FooBar.tagName = "foo-bar"
 */