I am squeezing out the last bytes from my svg-icon
Customized Built-In HTMLImageElement
What is the latest news on (the future of) Apple/Safari & Customized Buil-In Elements?
is there a developer discussion to read up on somewhere?
will I run into trouble for not using a constructor()
and thus no super()
call ?
Same for not using a connectedCallback()
?
Bonus question:
the attributeChangedCallback
gets a FOURTH parameter... undocumented
Anyone know more about this?
The snippet shows a P4 object=null
in all 4 browsers: Chrome, Edge, FireFox, Opera
customElements.define("svg-icon", class extends HTMLImageElement {
static get observedAttributes() {
return ["color"];
}
attributeChangedCallback(name,oldValue,newValue,P4,P5) {
console.log('P4:',typeof P4,P4,'P5:',typeof P5,P5);
this.src = `data:image/svg+xml,<svg viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'>`
+`<circle cx='4' cy='4' r='4' fill='${newValue}'/></svg>`
}
}, { extends: "img" })
img{
width:10%;
}
<img is="svg-icon" color="red">
<img is="svg-icon" color="green">
<img is="svg-icon" color="blue">
attributeChangedCallback(attrName, oldValue, newValue, attrNamespace)
as in:icon.setAttribute('color', 'red'); //'color',null,'red',null
icon.setAttributeNS('foo', 'color', 'red'); //'color',null,'red','foo'