Problem using paper-tabs with links and anchors when <base href="/">

[mercmobily]

Description

Suppose you have <base href="/"> (mainly so that polyber build will change that / to whatever build it is)

When using paper-item with the link option (and therefore with one link in each paper-tab), the link will point to the site's root rather than the current page

Expected outcome

Ideally, a link like this:

<paper-tab name="master-sheet" link>
  <a href="#master-sheet" class="link" tabindex="-1">Master sheet</a>
</paper-tab>`

should point to #master in the CURRENT page, even if the page is not located on the server's root

Actual outcome

The link will be to base followed by #

Live Demo

    <app-route route="{{route}}" pattern="/:jobId" data="{{routeData}}" active="{{active}}"></app-route>
    <my-header-layout back header-fixed state="{{state}}" header-title="View">
      <div slot="body">
        <div class="card">
          <paper-tabs attr-for-selected="name" selected="{{hash}}">
            <paper-tab name="master-sheet" link><a href="#master-sheet" class="link" tabindex="-1">Master sheet</a></paper-tab>
            <paper-tab name="checklist" link><a href="#checklist" class="link" tabindex="-1">Checklist</a></paper-tab>
          </paper-tabs>
        </div>
      </div>
    </my-header-layout>

To fix it, I am using iron-location to get the current path, and using it with the links:

    <iron-location path="{{path}}" hash="{{hash}}"></iron-location>
    <app-route route="{{route}}" pattern="/:jobId" data="{{routeData}}" active="{{active}}"></app-route>

    <my-header-layout back header-fixed state="{{state}}" header-title="View">
      <div slot="body">
        <div class="card">
          <paper-tabs attr-for-selected="name" selected="{{hash}}">
            <paper-tab name="master-sheet" link><a href="[[path]]#master-sheet" class="link" tabindex="-1">Master sheet</a></paper-tab>
            <paper-tab name="checklist" link><a href="[[path]]#checklist" class="link" tabindex="-1">Checklist</a></paper-tab>
          </paper-tabs>
        </div>
      </div>
    </my-header-layout>

So:

• Is this a good way to go about it?
• Since PSK comes with <base>, shouldn't the doc cover this use-case?

[mercmobily]

For completeness sake, here is the full code including iron-pages selecting the right page:

    <iron-location path="{{path}}" hash="{{hash}}"></iron-location>
    <app-route route="{{route}}" pattern="/:jobId" data="{{routeData}}" active="{{active}}"></app-route>

    <my-header-layout back header-fixed state="{{state}}" header-title="View">
      <div slot="body">
        <div class="card">

          <paper-tabs attr-for-selected="name" selected="{{hash}}">
            <paper-tab name="master-sheet" link><a href="[[path]]#master-sheet" class="link" tabindex="-1">Master sheet</a></paper-tab>
            <paper-tab name="checklist" link><a href="[[path]]#checklist" class="link" tabindex="-1">Checklist</a></paper-tab>
            <paper-tab name="times" link><a href="[[path]]#times" class="link" tabindex="-1">Vessel times</a></paper-tab>
            <paper-tab name="manifest" link><a href="[[path]]#manifest" class="link" tabindex="-1">B/L manifest</a></paper-tab>
          </paper-tabs>

          <iron-pages role="main" attr-for-selected="name" selected="[[hash]]">
            <div name="master-sheet">
              <hot-network>
                <iron-ajax url="/stores/jobs/{{routeData.jobId}}" last-response="{{info}}" auto></iron-ajax>

                <a href="/edit-jobs/{{info.id}}">
                  <paper-button raised>Edit job</paper-button>
                </a>
                {{_o(info)}}
              </hot-network>
            <div>
          </iron-pages>

        </div>
      </div>
    </my-header-layout>