B.Y.O.F. — Part 2: Web Components as Containers

1. Web Components to Modularize Framework X

Angular and Vue both use this approach with Web Components. They let their developers take an existing framework components and wrap them as Custom Elements. These wrappers generally convert the inputs and outputs of these components into standardized API and with the inclusion of their runtime, usually much larger than the next options I will discuss, you can use these components outside of applications built with these frameworks.

2. Web Components as the Framework

Polymer is the first to come to mind as it was really the first popular library to push the use of Web Components. But other competitors, like Stencil, have recently shown themselves to be players. These frameworks generally smaller than those in category 1, are trying to provide their own full solution built on this technology. Web Components are the Components. They try to tackle everything a traditional JS Framework would tackle. This is where the mindset of Web Components vs React Components comes from. They are directly comparable. These libraries started as being very specialized and locked in with convention as much as traditional JS Frameworks, but as time has gone on they have increased their compatibility.

3. Web Components as a Container (Bring your own Renderer)

This is a relatively newer idea and is most closely popularized by SkateJS. Skate wasn’t always like this. Skate started as a Web Components as a Framework library much like those in the 2nd category. It used a couple different renders over it’s early versions (Preact, and Incremental DOM) I believe. At a certain point they decided to change it to be bring your own renderer. So you can use Skate with React, or Preact, or LitHTML, or whatever you feel like. This was a pretty revolutionary idea really since there is no Framework buy in. Skate sets the interface and you can use whatever you see fit.

3b. Web Components as a Container (Bring your own Component)

See I have to blame KnockoutJS for this again. My first foray into Web Components was with Knockout at work back in 2013. We realized that our web of View Models was not going to hold up, so our COO decided that Web Components were the future and started prototyping out ways to use Knockout with Components. This became my project in 2014 and finding document-register-element as the baseline polyfill and I built a library that did most of the v0 spec for web components using Knockout’s custom bindings(directives) to simulate content insertion (predecessor to slots).



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ryan Carniato

Ryan Carniato

FrontEnd JS Performance Enthusiast and Long Time Super Fan of Fine Grained Reactive Programming. Member of Marko Core Team. Author of SolidJS UI Library.