Last August, as my team was pondering moving away from Polymer and creating our own set of neat vanilla js custom elements, I decided to take a data driven stab at deciding is this was a viable plan. My team has been building web applications for over four years using Polymer and that corpus of code could be used to guide the decision. The first thing I did was scan each project and record every Polymer or Iron element used in every project. If I’m going to replace Polymer at least I should know how many elements I’m signing up to rewrite. That initial list was surpising in a couple of ways, the first was how short the list was:

Polymer/Iron elements Used
iron-ajax
iron-autogrow-textarea
iron-collapse
iron-flex-layout
iron-icon
iron-pages
iron-resizable-behavior
iron-scroll-threshold
iron-selector
paper-autocomplete
paper-button
paper-checkbox
paper-dialog
paper-dialog-scrollable
paper-drawer-panel
paper-dropdown-menu
paper-fab
paper-header-panel
paper-icon-button
paper-input
paper-item
paper-listbox
paper-menu
paper-menu-button
paper-radio-button
paper-radio-group
paper-spinner
paper-tabs
paper-toast
paper-toggle-button
paper-toolbar
paper-tooltip

After four years of development I expected the list to be much larger.

The second surpise was how many of the elements in that list really shouldn’t be elements at all. For example, some could be replaced with native elements with some better styling, for example button for paper-button. Alternatively some could be replaced with CSS or a non-element solution, such as iron-ajax, which shouldn’t be an element at all and should be replaced with the fetch() function. After doing that analysis the number of elements actually needed to be re-implemented from Polymer fell to a very small number. In the table below the ‘Native’ column is for places where we could use native elements and just have a good default styling for them. The ‘Use Instead’ column is what we could use in place of a custom element. Here you will notice a large number of elements that can be replaced with CSS. Finally the last column, ‘Replacement Element’, is the name of the element we made to replace the Polymer element:

Polymer Native Use Instead Replacement Element
iron-ajax   Use fetch()  
iron-collapse     collapse-sk
iron-flex-layout   Use CSS Flexbox/Grid  
iron-icon     *-icon-sk
iron-pages     tabs-panel-sk
iron-resizable-behavior   Use CSS Flexbox/Grid  
iron-scroll-threshold   Shouldn’t be an element  
iron-selector     select-sk/multi-select-sk
paper-autocomplete   No replacement yet.  
paper-button button    
paper-checkbox     checkbox-sk
paper-dialog     dialog-sk
paper-dialog-scrollable   Use CSS  
paper-drawer-panel   Use CSS Flexbox/Grid  
paper-dropdown-menu     nav-sk
paper-fab button    
paper-header-panel   Use CSS Flexbox/Grid  
paper-icon-button button   icon-sk
paper-input input    
paper-item     nav-sk
paper-listbox option/select    
paper-menu     nav-sk
paper-menu-button     nav-sk
paper-radio-button     radio-sk
paper-radio-group      
paper-spinner     spinner-sk
paper-tabs     tabs-sk
paper-toast     toast-sk
paper-toggle-button     checkbox-sk
paper-toolbar   Use CSS Flexbox/Grid  
paper-tooltip   Use title attribute  

That set of minimal custom elements has now been launced as elements-sk. While the number of elements is small, it is driven by four years of development using custom elements, and just might be a good set of elements for your development too. If anyone has done a similar analysis I’d love to hear about it, please let me know in the comments.