<paper-scroll-header-panel condenses keep-condensed-header>
<paper-toolbar class="tall layout horizontal" id="title-toolbar">
<div class="bottom bottom-container horizontal layout">
<div class="bottom-title paper-font-subhead">Title</div>
</div>
</paper-toolbar>
<div id="content" class="content-dark">
<div class="horizontal center-justified layout">
<!-- some body content here -->
</div>
<paper-toolbar justify="center">
<paper-tabs selected="{{selected}}" class="fit" scrollable>
<paper-tab>1</paper-tab>
<paper-tab>2</paper-tab>
<paper-tab>3</paper-tab>
<paper-tab>4</paper-tab>
</paper-tabs>
</paper-toolbar>
<iron-pages selected="{{selected}}">
<div><!-- page content --></div>
<div><!-- page content --></div>
<div><!-- page content --></div>
<div><!-- page content --></div>
</iron-pages>
</div>
</paper-scroll-header-panel>Edit: Previously, I had opted not to have a tab selected by default. However, when I decided to have a tab viewable on load via the below code I no longer ran into this issue. It still seems to be a problem though.
window.addEventListener('WebComponentsReady', function() {
// imports are loaded and elements have been registered
var template = document.querySelector('template[is="dom-bind"]');
template.selected = 0; // selected is an index by default
});