At EmberConf this year I was privileged to be in front of a few hundred web developers to talk about interoperable components (video of the talk here). My curiosity about how to best write a UI component usable across many environments started nearly 18 months ago. At that time HTMLBars, a refactor of Ember’s template system to be more HTML-aware, was just landing in applications. We were considering what invoking a W3C Custom Element might look like in Ember, and trying to reason about how information could be passed in and out.
W3C Web Components have been described several times as a “loose collection of specifications”. The best practices for authoring standards-based web components, or for writing a framework that can consume them, are emergent at best. The draft specifications tread lightly on the ground of what should be idiomatic.
Despite the vagueness of the standards-guided process (which is less far along and less stable than many presume), there are three guiding patterns you can follow to write an interoperable component usable across a variety of settings.
Let’s take a look.Continue reading →