Search code examples
web-componentcustom-element

Customized Buil-In element without a Constructor/Super call, and the Apple future


I am squeezing out the last bytes from my svg-icon Customized Built-In HTMLImageElement

Some detailed questions:

  • 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">


Solution

    1. yes, evolving standards discussed in https://github.com/WICG/webcomponents
    2. yes, not specifying a constructor in a derived class will automatically inherit the parent constructor from the prototype chain (ultimately defaulting to an empty method)
    3. yes, all webcomponent lifecycle callback functions are optional
    4. yes, the signature is attributeChangedCallback(attrName, oldValue, newValue, attrNamespace) as in:
    icon.setAttribute('color', 'red'); //'color',null,'red',null
    icon.setAttributeNS('foo', 'color', 'red'); //'color',null,'red','foo'