Dublin Library

The Publishing Project

Web Components: Where to use web components?

  • 2 min. read

 

I'm mostly familiar with using Web Components (specifically Polymer) as the front end for either JSON or Firebase backends. My research has turned to how do we make web components play nice with other frameworks, MVC and otherwise. Sole Penadés talks about Web Components and also what to expect when using web components with other frameworks :) We can take two approaches to Web Components: Whole cloth or progressive enhancement. Whole cloth is building a custom element hierarchy with the associated elements needed to achieve your application goals. It may require multiple elements like the ones below where each element is defined and imported in a separate document with its own CSS and Javascript associated with each element. ```markup ``` A progressive enhancement approach is what Github did. Instead of going full bore with defining new components, they enhanced portions of their application application by extending what is already there as we discussed above. Taking the `my-avatar` element we created earlier we'll revisit the code to make it work as a component. ```javascript var MyAvatarPrototype = Object.create(HTMLElement.prototype); MyAvatarPrototype.createdCallback = function() { var username = this.getAttribute('username'); var service = this.getAttribute('service'); var url = 'http://avatars.io/' + service + '/' + username; var img = document.createElement( 'img' ); img.setAttribute('src', url); this.appendChild(img); }; document.registerElement('my-avatar', { prototype: MyAvatarPrototype }); ``` And then call it as we normally would: ```markup ``` A third alternative when using Polymer (and only Polymer) is to use auto binding templates. With these templates we can use Polymer tools outside polymer custom elements. You create the auto-binding template by using a template with the `is=dom-template` attribute. Once you create the template you can use all Polymer techniques and tricks inside your main document without having to create a custom element for it as show in the example below. ```markup ``` ### So which one should we use? As with everything on the web the answer is, **it depends**. Type extension elements have the draw that, if they don't work (either because Javascript is disabled, polyfills are not available or custom elements are not supported), content will still be displayed to the user. For larger projects where type extension elements are not enough, full blown custom elemets are necessary with all the additional weight and performance penalties they carry if you're not careful when implementing them. Paul Lewis' blog post [Polymer for the performance obsessed](https://aerotwist.com/blog/polymer-for-the-performance-obsessed/) outlines some of the requirements to improve a Polymer application's performance. It would be interesting to see how much of the post (given where Paul works) is applicable to vanilla components and x-tag built elements In the end the type of component you use depends on your project and your needs.

Edit on Github