(2019-09-17) Gregorio Looking Back On Five Years Of Web Components

Joe Gregorio: Looking back on five years of web components. Over 5 years ago I wrote "No more JS frameworks" (JavaScript) and just recently Jon Udell asked for an update.

We started with Polymer 0.5 as it was the closest thing to web components that was available.

There are six surfaces, or points of contact, between elements, that you can use when stitching elements together, whether they are native or custom elements.

realize that we are only talking about DOM, we aren’t talking about composing JS modules or strategies for composing CSS. For the terminology clarification, when talking about DOM I’m referring to the DOM Interface for an element, not the element markup. Note that there is a subtle difference between the markup element and the DOM Interface to such an element

let’s get into the six surfaces that can be used to stitch together an application.

Attributes and Methods

Events

The next two surface are events. Events are actually two surfaces because an element can listen for events

DOM Position

Why not Polymer?

Polymer started out and continues to be a platform for experimentation with proposed standards

The downside to the approach of adopting nascent standards is that sometimes those things don’t become standards. For example, HTML Imports was a part of Polymer 1.0 that had a major impact on how you wrote your elements, and when HTML Imports failed to become a standard you had a choice of either a major migration to ES modules or to carry around a polyfill for HTML Imports for the remainder of that web app’s life. You can see the same thing happening today with Polymer 3.0 and CSS mixins.

Finally Polymer’s data binding has some mis-features. It offers two-way data binding which is never a good idea, every instance of two-way data binding is just a bug waiting to happen.

What comes after Polymer?

The first thing I did was scan each project and record every Polymer element used in every project

That initial list was surpising in a couple of ways, the first was how short the list was

The second surpise was how many of the elements in that list really shouldn’t be elements at all.

a large number of elements that can be replaced with CSS.

Let’s break each of those aspects of a framework out into their own standalone thing and then we can pick and choose from the various implementations when we start developing an application. This style of developement we call “a la carte” web development.

Such code will natively run in browsers that support custom elements v1.

Example

Just because we’ve published pulito and elements-sk doesn’t mean we believe they are the best solutions

The final two surfaces are position in the DOM tree, and again I’m counting this as two surfaces because each element has a parent and can be a parent to another element. Yeah, an element has siblings too, but that would bring the total count of surfaces to seven and ruin my nice round even six.