Polymer 1.x: paper-tab inside paper-dialog not working

Here is the plunk.

My goal is to implement a paper-tabs + iron-pages pattern inside a paper-dialog.

When I click on the second tab I expect to see the content header of the tabbed pane read "Page 2" followed by the Lorem Ipsum text. But, instead, there is no content inside the second tabbed pane.

What am I missing?

<link href="tab-a.html" rel="import">
<link href="tab-b.html" rel="import">

<base href="https://polygit.org/polymer+:master/iron-data-table+Saulis+:master/components/">
<link rel="import" href="polymer/polymer.html">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>

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

<dom-module id="content-el">
    <template>
        <style></style>

    <button on-tap="open">Open Dialog</button>

    <paper-dialog id="dialog" modal>
      <h2>Dialog Title</h2>

      <paper-tabs selected="{{selected}}">
        <paper-tab>Tab 1</paper-tab>
        <paper-tab>Tab 2</paper-tab>
      </paper-tabs>

      <iron-pages selected="{{selected}}">
        <tab-a></tab-a>
        <tab-b></tab-b>
      </iron-pages>

    </paper-dialog>

    </template>

  <script>
    (function() {
      'use strict';
      Polymer({
        is: 'content-el',
        open: function() {
          this.$.dialog.open();
        },
      });
        })();
  </script>
</dom-module>

Preset the selected tab

Otherwise your paper-tabs will initialize with no preselected tab.

Polymer({
  is: 'content-el',
  properties: {
    selected: {
      type: Number,
      value: 0
    }
  },
  open: function() {
    this.$.dialog.open();
  }
});

Fix your typo in tab-b declaration

Polymer({
  // was previously `tabb`
  is: 'tab-b'
});