Comparing Web Components: Part 3 – Bosonic and X-Tags

Aside from Polymer (which was relatively easy and definitely going in the right direction) there are two other libraries listed on the website – Bosonic and X-Tags. In this article I will review each one and what it took to get them working.

TL;DR – I was disappointed in all the libraries. This may come off as my not understanding the libraries or just loving Polymer too much. I can live with myself for that.


I was actually disappointed in this library. I’m sure some people will get offended when I say this, but the X-Tag library is just a crude wrapper around the web components platform library (webcomponents.js) and does nothing more for me than the original vanilla javascript version. At least with the vanilla javascript version I could see what was happening. Not so fast on this one.

Firstly, there are things I could not get around. If I included webcomponents-lite.js, then I got an error in the x-tag-core library. No way around it – the current version of X-Tag doesn’t work with the current version of webcomponents.js. This made it unlikely that I will use X-Tag to start with.

Then there is the code. I set up a simple one page web component – it had a template, stylesheet and some Javascript. Here is the Javascript code:

        (function () {
            xtag.register('xtag-helloworld', {
                prototype: Object.create(HTMLElement.prototype),

                lifecycle: {
                    created: function () {
                        console.log("xtag-helloworld: lifecycle.created");
                        var tpl = document.getElementById("XTagHelloWorld").content;

Is this really any better than the vanilla JS version?:

(function () {
    // Find the template for this HTML element
    var template = document.currentScript.ownerDocument.querySelector("#noLibHelloWorld");

    // Create the prototype for the new HTML element
    var elementPrototype = Object.create(HTMLElement.prototype);

    // Set up lifecycle callbacks for the new HTML element
    elementPrototype.createdCallback = function () {
        // Create the shadow DOM and clone the template into the shadow DOM
        var shadow = this.createShadowRoot();
    document.registerElement("nolib-helloworld", { prototype: elementPrototype });

In my eyes, this is practically identical. So what is the library buying me?

Finally, documentation – there is a single page of documentation. Not once does the page provide a complete end-to-end example. I did check out the examples in the x-tag github repo. Not one of the examples showed usage in a HTML Import – it was always a JS and CSS file together. Interesting, not one showed templates either – another core concept of web components.


The Bosonic library was doomed from the start. Rather than embrace web components (and utilize the polyfill), the Bosonic library decided to transpile the web components into a CSS and JS file that you could then include in your project. This is reasonable enough had they supported gulp – they don’t. This would actually add another step to my process:

  1. Turn the HTML/LESS/JS files into files appropriate for a HTMLImport
  2. Vulcanize the files so I can import them with one file
  3. Bosonize them so I can split them apart again

That extra step isn’t what I envisioned. The code is reasonable. For instance, in the case of the work I have been doing, here is the code:

            createdCallback: function () {
                var root = this.createShadowRoot();

As with X-Tags, I can tie this back directly to the Vanilla JS version. Why do I need to do this scaffolding? Can’t the library detect I have a template and just do it? At least this library had support for templates and you could write the code in a single HTML file (although it was broken up for production usage).

In terms of documentation, I’d rate Bosonic as better than X-Tags but nowhere near as good as Polymer. The tutorial is a nice walk-through and introduces the major things you would need to do in digestible chunks, making it easy to get into Bosonic.

On the downside, I just don’t like their approach.


Given my disappointment with the former libraries, I decided to take a look elsewhere on the Internet to see if I could come up with anything comparable. SkateJS is a replacement for webcomponents-lite.js. Rather than use the W3C Web Components spec, it’s decided to use its own API.

The Verdict

There are really two answers here:

  1. If you don’t mind taking a dependency on a library including an API that isn’t stable yet and could change (in fact, it just did), then Polymer is probably your best bet. It does the scaffolding for you and has good documentation.
  2. If you care about the Polymer library dependency and the moving API target, take a dependency on the webcomponents-lite library and use the Web Components spec and Vanilla Javascript.

This is just my personal opinion. I highly recommend you do your own research. Take a simple component you are writing – maybe as a jQuery plugin or just a module of another app, and write it in each of the frameworks. You will figure out for yourself pretty quickly which one you prefer.

I’m going to take a bet that Polymer has gone through the major upheaval with the 0.8 release. Certainly, the information coming out of the project indicates this is so. There may be some refactoring to do when Polymer reaches 1.0, but it’s likely to be minimal. As a result, I’m taking that dependency on Polymer for my web components.

One thing to note about my project is that it is an ASP.NET MVC project; not a SPA project. As a result, the web components that I use are likely to be visual and relatively simple. I am not going to be using a multi-page router in a web component, for example. You should think about your own project and its needs when doing this research to ensure you get the best possible solution for your project.