Make hyphenation in consistent with browser APIs
Javascript snake-case gets turned into kebab-case in HTML Change name attribute in example to match
This commit is contained in:
parent
6f85103c63
commit
60af0773a0
2 changed files with 19 additions and 16 deletions
|
@ -1,5 +1,8 @@
|
||||||
export class BetterHTMLElement extends HTMLElement {
|
export class BetterHTMLElement extends HTMLElement {
|
||||||
attributeChangedCallback(name, old, value) { if (name+"Changed" in this) this[name+"Changed"](value, old) }
|
attributeChangedCallback(attr, old, value) {
|
||||||
|
let name = attr.replace(/-([a-z])/, (_, l) => l.toUpperCase())
|
||||||
|
if (name+"Changed" in this) this[name+"Changed"](value, old)
|
||||||
|
}
|
||||||
|
|
||||||
// Array of connected callbacks
|
// Array of connected callbacks
|
||||||
#connected = [];
|
#connected = [];
|
||||||
|
@ -25,24 +28,23 @@ export class BetterHTMLElement extends HTMLElement {
|
||||||
this.setContent(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.
|
// Adds property/attribute mappings to the object.
|
||||||
static initialize(name = this.name) {
|
static initialize(name = this.name) {
|
||||||
const names = Object
|
const names = Object
|
||||||
.getOwnPropertyNames(this.prototype)
|
.getOwnPropertyNames(this.prototype)
|
||||||
.filter(name => name.search(/Changed$/)+1)
|
.filter(name => name.search(/Changed$/)+1)
|
||||||
.map(name => name.replace(/Changed$/, ''))
|
.map(name => name.replace(/Changed$/, ''))
|
||||||
|
const attributes = names.map(attr => attr.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase())
|
||||||
Object.defineProperty(this, "observedAttributes", {
|
Object.defineProperty(this, "observedAttributes", {
|
||||||
get() { return names }
|
get() { return attributes }
|
||||||
})
|
})
|
||||||
names.forEach( attr => Object.defineProperty(this.prototype, attr, {
|
names.forEach(name => {
|
||||||
|
let attr = name.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase()
|
||||||
|
Object.defineProperty(this.prototype, name, {
|
||||||
get() { return this.getAttribute(attr) },
|
get() { return this.getAttribute(attr) },
|
||||||
set(val) { this.setAttribute(attr, val) }
|
set(val) { this.setAttribute(attr, val) }
|
||||||
}))
|
})
|
||||||
|
})
|
||||||
name = name.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase()
|
name = name.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase()
|
||||||
customElements.define(name, this)
|
customElements.define(name, this)
|
||||||
return name
|
return name
|
||||||
|
@ -54,10 +56,11 @@ export class BetterHTMLElement extends HTMLElement {
|
||||||
constructor() {
|
constructor() {
|
||||||
super();
|
super();
|
||||||
this.attachShadow({mode: "open"});
|
this.attachShadow({mode: "open"});
|
||||||
this.shadowRoot.innerHTML = `<h1>Hello, <span id="name"></span></h1>`
|
this.shadowRoot.innerHTML = `<h1>Hello, <span part="name"></span>!</h1>`
|
||||||
|
this.userName = "World";
|
||||||
}
|
}
|
||||||
|
|
||||||
nameChanged(name) { this.shadowRoot.querySelector("#name").innerHTML=name; }
|
userNameChanged(name) { this.shadowRoot.querySelector('[part="name"]').innerHTML = this.userName; }
|
||||||
}
|
}
|
||||||
FooBar.initialize()
|
FooBar.initialize()
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -18,15 +18,15 @@ const parseArgs = (element, args) => {
|
||||||
parseArgs(element, arg)
|
parseArgs(element, arg)
|
||||||
else
|
else
|
||||||
for (key in arg)
|
for (key in arg)
|
||||||
element.setAttribute(key.replace("_", "-"), parseAttribute(arg[key]))
|
element.setAttribute(key.replace(/([a-z])([A-Z])/g, "$1-$2"), parseAttribute(arg[key]))
|
||||||
}
|
}
|
||||||
|
|
||||||
const node = (name, args, xmlns) => {
|
const node = (name, args, xmlns) => {
|
||||||
let element
|
let element
|
||||||
if (xmlns)
|
if (xmlns)
|
||||||
element = document.createElementNS(xmlns, name.replace("_", "-"))
|
element = document.createElementNS(xmlns, name.replace(/([a-z])([A-Z])/g, "$1-$2"))
|
||||||
else
|
else
|
||||||
element = document.createElement(name.replace("_", "-"))
|
element = document.createElement(name.replace(/([a-z])([A-Z])/g, "$1-$2"))
|
||||||
parseArgs(element, args)
|
parseArgs(element, args)
|
||||||
return element
|
return element
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue