A web component that encapsulates paper-tabs and iron-pages of Google's Polymer project so that they work together.

easy-paper-tabs.html

<!--
author: Toby Anderson
licence: Creative Commons Attribution-ShareAlike 4.0 International (https://creativecommons.org/licenses/by-sa/4.0/legalcode)
-->

<link rel="import" href="../paper-tabs/paper-tabs.html">
<link rel="import" href="../iron-pages/iron-pages.html">

<!--

usage:

<easy-paper-tabs>
  <paper-tab>TAB 1</paper-tab>
  <paper-tab>TAB 2</paper-tab>
  <div class="page">Page 1</div>
  <div class="page">Page 2</div>
</easy-paper-tabs>

you can also use the selected attribute:

<easy-paper-tabs selected="1">
  <paper-tab>TAB 1</paper-tab>
  <paper-tab>TAB 2</paper-tab>
  <div class="page">Page 1</div>
  <div class="page">Page 2 is selected first!</div>
</easy-paper-tabs>

I think you could also set the selected attribute programatically, but I haven't tested this.

set the background and foreground colours of the tabs like this:

<style is="custom-style">
  easy-paper-tabs {
    --tabs-background-colour: blue;
    --tabs-colour: yellow;
  }
</style>

-->

<dom-module id="easy-paper-tabs">
  
  <template>
    
    <style>
      :host {
        display: block;
      }
      paper-tabs {
        background-color: var(--tabs-background-colour, mediumslateblue);
        --paper-tabs-selection-bar-color: var(--tabs-colour, white);
        color: var(--tabs-colour, white);
      }
    </style>

    <paper-tabs selected="{{selected}}">
      <content select="paper-tab"></content>
    </paper-tabs>

    <iron-pages selected="{{selected}}">
      <content selected=".page"></content>
    </iron-pages>
    
  </template>

  <script>
    Polymer({
      is: "easy-paper-tabs",
      properties: {
        selected: {
          type: Number,
          value: 0,
          notify: true,
          reflectToAttribute: true
        }
      }
    });
  </script>

</dom-module>