Custom Elements Builtin

^{Social Media Photo by Joanna Kosinska on Unsplash}

A better custom-elements-builtin polyfill, targeting Safari, but working in every other browser that has native customElements.

Warning

This module goal is to replace the current polyfill which has been around for a while but it has its own caveats.

Current Status

The purpose of this module is to bring Custom Elements builtin extends without constructors caveats, with better performance, and with better control through the qsa-observer module.

This module is currently under heavy tests, but it seems to work seamlessly OK in both Safari Desktop and Mobile.

Please help me out testing this module as much as you can so that I can bump a major version of the @ungap polyfill, and finally provide a caveats-free polyfill for this amazing part of the Web specs.

How To Test

Please use these features detection to avoid including this polyfill in every browser, considering that this is not transpiled, so it would break in IE11 if included without features detection, but it also adds unnecessary code to parse and execute in every browser that supports Custom Elements builtin natively.

<script>
if(this.customElements)
  try{customElements.define('built-in',document.createElement('p').constructor,{'extends':'p'})}
  catch(s){document.write('<script src="//unpkg.com/@webreflection/custom-elements-builtin"><\x2fscript>')}
else
  document.write('<script src="//unpkg.com/document-register-element"><\x2fscript>');
</script>

^{P.S. the \x2f is not a typo, it's exactly how you should write it or your page layout will break!}

---

There is also a live test page which should show few buttons and then cleanup.

All logs in console are there to understand if all elements reacted as expected, either within Shadow DOM nodes, or outside.

To Keep In Mind

If you'd like your builtin elements to be style-able, and you land these elements through their constructors or via document.createElement('button', {is: 'custom-button'}), remember to explicitly set their is attribute, because due to this inconsistent bug, Chrome and Firefox don't do that automatically, and your builtin extends might not get the desired style.

class BlueButton extends HTMLButtonElement {
  constructor() {
    super()
    // for dedicated styles, remember to do this!
    this.setAttribute('is', 'blue-button');

    // everything else is fine
    this.textContent = 'I am blue';
  }
}

customElements.define('blue-button', BlueButton, {extends: 'button'});

document.body.appendChild(new BlueButton);

This polyfill does that automatically because all builtin extends must be query-able via querySelectorAll, but other browsers won't do that automatically.