Our experience upgrading web components from Shadow DOM/Custom Elements v0 to v1
With Google now shipping both Shadow DOM v1 and Custom Elements v1 in Chrome,
and Apple shipping Shadow DOM v1 in Safari, we’ve been upgrading the
Basic Web Components
library from the original v0 specs to v1. Here’s what we learned, in case
you’re facing a similar upgrade of your own components, or just want to
understand some ramifications of the v1 changes.
Can Service Workers service background applications?
I had a thought experiment on how I might port an application I once
developed for native Android to a web app, even if it were to run solely
on Android devices. The application behaves like a mantle clock: every
fifteen or thirty minutes, it wakes up and plays a custom chime. My son
used to call it "Big Ben in Your Pocket."
We made our static site work offline in a day using the Service Worker API
We believe in progressive web applications as a strong alternative to native mobile applications.
Along with small experimental projects we conduct on the side, we intend to improve our web site over
time with new techniques and patterns, both to educate ourselves as well as to demonstrate the worth
of these browser improvements. Our latest improvement makes use of
You can now view most of the
Component Kitchen website offline, courtesy of the power of Service Workers.
We’ve rewritten the
backend server to rip out a popular templating language and replace it with
our opinion, made it a sufficiently capable general-purpose language that
we’ve dropped use of a special-purpose template language. As we began a
rewrite of our site, we were inspired by our recent work
and decided to apply the same philosophy to our backend as well.
Using React app techniques at the web component level with Redux, virtual-dom, and JSX
The rising interest in React inspired us to try implementing web components that use a reactive approach
to rendering. As an experiment, we’ve redone a React tutorial in web components, using Redux for
predictive state management, JSX for rendering state, and virtual-dom for comparative DOM updating.
Essentially, we treat each web component as if it were a reactive application in its own right. Our goal
isn't to push an agenda, but to learn what the reactive web component patterns might look like.
Writing a web component that wraps a standard HTML element might alleviate the need for is="" syntax
What if you want to create a web component that extends the behavior of a
standard HTML element like a link? An early draft of the Custom Elements
specification allowed you to do this with a special syntax, but the fate of
that syntax is in doubt. We've been trying to create custom variations of
standard elements without that support, and wanted to share our
progress. Our results are mixed: more positive than we expected, but with some
Web components let you preserve the backward compatibility of your own old code
An interesting point of backward compatibility came up as we were recently
porting our own Component Kitchen
The main goal of the port was to be able to write our own site in plain ES6,
with less abstraction between us and the platform. We've also reaped some
other benefits: our site is now simpler to build, and much faster to load on
older polyfilled browsers like Apple Safari and Internet Explorer.
Basic Web Components is a monorepo
Basic Web Components (BWC) is a project
containing multiple, often-related Web Components along with support code implemented as mixins. As we have migrated
the implementation of BWC from Polymer components to a
the way we organize the project to support the following goals:
As discussed in this blog over the past few months, we've been plotting a
mixins instead of a monolithic component framework. We've just published a
new 0.7 release of the
project that represents a transition to this mixin strategy. So far, this
approach appears to be working well, and meeting our expectations.
Implementing web component mixins as functions
In response to our last post on
building components from a loose collection of mixins,
a helpful commenter
referred us to another mixin library
he had released called mixwith.js.
That library treats mixins more as a pattern than a thing. In that pattern, a
mixin is simply a function that takes a base class and returns a subclass of
that base class with the desired new features.
Building web components from a loose framework of mixins
We think it’s generally necessary to use
some sort of framework to develop web components,
but that framework may not have to be monolithic in nature. Instead, the
framework might be built entirely as mixins on top of a kernel that enables
Rather than invoking a framework’s class constructor, one would simply
compose the desired mixins together to create an instantiable web component.
Composing mixins to make a solid foundation for web components
We've been searching for a way to quickly create web components by composing
together pre-defined user interface behaviors, and we have some progress to
share on that front.
An evaluation of polymer-micro as a minimal web component framework
Our Basic Web Components project currently creates its components using Google's Polymer framework, but we've been evaluating the use of the smaller polymer-micro core as a replacement for full Polymer. The polymer-micro core appears to be a useful web component framework in its own right, and may provide nearly everything a component library like ours needs.
Nobody writes production web components in vanilla JS — so using a framework makes total sense
You may hear someone say they avoid using React, Polymer, Angular, or some other
framework du jour, and that they prefer to write their front end code in vanilla
everybody ends up writing atop a framework — even if it's a tiny framework of
their own devising. Production web components written in vanilla JS appear to be
We’re shutting down our web component catalog
We launched this Component Kitchen site in April 2014 with a web component catalog as its centerpiece. Today we're shutting down that catalog so we can focus on web component consulting and our open web components projects, including the Gold Standard Checklist for Web Components and the general-purpose Basic Web Components library.
The Gold Standard checklist for web components
For the last few months, we've been excited to help a new open project get off
the ground: the
Gold Standard checklist for web components.
The checklist’s goal is to define a consistent, high quality bar for web
Try our interactive web components tutorial
We've just posted an
interactive web components tutorial
that teaches the basic concepts with editable live demos. We hope you'll find
that this tutorial:
Print a handy 2015 wall calendar built with web components
If you hold or participate in project management discussions, consider
printing out this handy
Printable Wall Calendar
that was quickly built with web components.
basic-list-box — keyboard-navigable list box, now with ARIA support for better accessibility
This review focuses not on a component, but an aspect of a component
Component Kitchen released that component under the aegis of the
Basic Web Components
project. In our reviews, we want to avoid focusing too much on
our own work, but in this case we can happily feature a small but important
contribution to the project from developer
a passionate advocate for building an accessible web that can be used by
ordered-columns — Pinterest-style packed column layout
ordered-columns implements a packed column layout in the style of Pinterest.
Home pages with cards or modules that vary in height often use this layout to
pack the cards into columns: cards are assigned in order to whichever column
is currently the shortest. Such a layout is quick to compute, produces
visually engaging results, maximizes content that appears above the fold. It's
a useful responsive design pattern that scales well from small displays to
but this is a great example of a pattern that can be delivered as a web
akyral-modal – Modal overlay with beautiful demos and documentation
We love the elegant demos and documentation
is creating for his collection of web components. His akyral-modal component,
for example, addresses the common need to have a modal dialog or other UI
appear in front of other elements on the page. Several other modal components
exist, but none so nicely documented.
x-rating — Simple star rating element that works
Sometimes the simplest approach works best. A number of registered web
components aim to handle the simple task of showing or soliciting a star
rating from a user using the now-convential set of 5 stars. On its own, a
5-star rating system can present serious issues, as users tend to offer
responses only at the extremes, but when managed well (adding users to add
comments to explain their response, etc.), such rating systems can be useful.
voice-elements — Easy access to the Web Speech API (on Chrome)
The voice-elements component gives you easy access to the Web Speech API
natively supported (as of this writing) only in Chrome. This lets you both
read text aloud to the user, and perform basic voice recognition. Users can
quickly tire of repetitive spoken prompts, but voice playback might useful for
short alerts that incorporate dynamic content such as data coming from your
A new series of web component reviews with live demos
We've been eagerly tracking the state of the web components community since
we started Component Kitchen earlier this year. Over that time, it's been
exciting to watch the number of web components registered with
Bower grow from about 40 to nearly 500 today.
slide-page — Create basic browser-based presentations in HTML
There are already a number of web components that wrap existing slide-based
presentation libraries; slide-page is notable for being written from the
ground up with web components. The
for the core component is little more than a wiring together of existing parts
in a novel combination. That approach is, in fact, exactly right, and
component writing at its best! This component mostly adds sequential arrow
button navigation around Polymer's core-animated-pages component. For the
buttons, it takes advantage of Google's Material Design theme, specifically
the Paper floating action button.
google-map — A simple wrapper for maps and driving directions
Many companies embed a hard-coded Google Map on their site to show, for
example, the location of their office. This component allows you to easily
create more dynamic maps. You could, for example, combine this with
geo-location to show
your user's current location.
General-purpose web components
Component Kitchen founder Jan Miksovsky shares some of his recent experience creating some general-purpose components over on his user interface design/development blog at flow|state.
Live demos let people see what a component is all about
We recently added live demos to the Component Kitchen site for all components that define a demo. Components with demos are marked on the home page with a "DEMO" indicator, so you can check out all the demos.
Component Kitchen preview launched
Today we’re excited to publicly announce the launch of a preview edition of our site at https://component.kitchen.