Some Custom Elements Update
Update
It’s out, and widely compatible!
Please give @webreflection/custom-elements module a chance, as it’ll be part of ungap umbrella once proven working in all conditions ♥
Times are different, and so should be polyfills! I’ve managed to bring full V1 specs compliant to every browser, and this is the story!
Some Background
In July 2014, I’ve created an alternative Custom Elements polyfill in response to the Polymer library, simply because I follow, and write, standard code, and Custom Elements never needed a whole library/framework to be used, which I also believe is one of the reasons these never got widely adopted … that being said, I appreciate the Polymer team effort to promote something based on standards (well, sort of, as they had their own constrains and dependencies at that time), as opposite of creating their own parser, tooling, etc … you know the story …
Extremely Successful 🎉
Not only I have to thank every polyfill contributor to date, the “tiny” workaround (currently 5K after brotli) got adopted by early Custom Elements based projects such as Google AMP, as opposite of using the most known @webcomponents/webcomponentsjs polyfill, simply because it was reliable, and also lighter than the “official” polyfill, which weights 31K on unpkg.
Pears VS Apples
Well, the most promoted polyfill has a little gotcha in it, not every Web developer knows: it brings ShadowDOM too in the equation, … or sort of.
The ShadowDOM specification is something not mandatory at all to have Custom Elements working the way we like, but somehow it’s been promoted as the holy grail for better elements on the Web, even if it’s technically “unpolyfillable” … and meanwhile, every other framework that couldn’t care less about ShadowDOM became the industry standard, as ShadowDOM is full of gotchas, where not playing well with Server Side Rendered content is likely the main one, but not working reliably once polyfilled is likely the second one.
… back to the topic …
If even Google managed to create an AMP industry with Custom Elements, and without using ShadowDOM, it means we’ve all misunderstood, or missed out, how powerful Custom Elements could be.
And this is the thing: my polyfills, to date, never covered that part of the specs that can’t be really covered, but worked well for every use case that wouldn’t really need ShadowDOM in the equation.
Yet, my polyfills work with ShadowDOM too, and I’ve even published a “poorlyfill” for it, that works kinda well in most cases.
Enough said, this post is about Custom Elements, so let’s get to it!
A less than 2K polyfill for all
Not only my latest attempt to bring Custom Elements V1 everywhere is almost 1/3rd of my initial polyfill size, if not less, browsers these days have native support for WeakMap, Set, and ultimately, MutationObserver, which makes libraries/helpers such as qsa-observer a dream to work with … and that was the trigger!
A library that informs, in a reliable way, if any element was connected (mounted), or disconnected (unmounted), plus the ability to observe any attribute of every node, and all of this without memory leaks, is just a life-saver, or game-changer, in my polyfills cases.
This is why I’ve got excited by its potentials:
- lightweight footprint, as it’s less than 0.6K once minified
- it works with every “modern legacy browser” we know
Builtin Extends for Safari and WebKit
Based on the fact Safari/WebKit supports natively Custom Elements, and also ShadowDOM, for what it matters, the latest polyfill to target these browsers only is currently @webreflection/custom-elements-builtin module, which should land after features detection to be sure no other browser already capable would use that code (P.S. no other evergreen browser lacks support).
Builtin extends are a nice feature, simply because these plays well with any 3rd parts library developers use these days, including React:
Not only React, every library/framework/tool able to set an is attribute would enable Custom Elements Builtin extends to work out of the box, but that’s not the end of the story!
P.S. this polyfill is about 1.4K, instead of 2.2K for the next one!
Custom Elements V1 Legacy
The @webreflection/custom-elements module brings full compliant Custom Elements V1 specification to any browser that doesn’t even support customElements at all, including builtin extends out of the box, and simply patching a couple of JS gotchas that are not available in older browsers, but that are granted to work well even after Babel transpilation.
