Как выделить выбранный текст routerLink при перезагрузке страницы в Polymer3.x?

Question

Я создаю музыкальное приложение Polymer3, которое извлекает плейлисты из общедоступного API. Все playlistNames реализованы в виде routerLinks.

При нажатии playlistName становится жирным, но при перезагрузке страницы routerLink не выделяется (жирным шрифтом).

Например: если я вхожу localhost:8081/playlist1 в URL, тогда playlist1 должен быть выделен жирным шрифтом при перезагрузке страницы.

Заранее спасибо.

static get template() {
    return html `

      <app-location route="{{route}}" url-space-regex="^[[rootPath]]">
      </app-location>

      <app-route route="{{route}}" pattern="[[rootPath]]:page" data="{{routeData}}" tail="{{subroute}}">
      </app-route>

      <app-drawer-layout fullbleed="" narrow="{{narrow}}">
        <!-- Drawer content -->
        <app-drawer id="drawer" slot="drawer" swipe-open="[[narrow]]">
          <app-toolbar>Menu</app-toolbar>
          <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
            <template is="dom-repeat" items="[[playlists]]">
              <a name="[[item.name]]" href="[[rootPath]][[item.name ]]">[[item.name]]</a>
            </template>
          </iron-selector>
        </app-drawer>

    `;
  }

Answer 1

При нажатии playlistName становится жирным, но при перезагрузке страницы routerLink не выделяется (жирным шрифтом).

Это происходит, вероятно, из-за присутствия IronSelectableBehaviour в iron-selector элемент, который я считаю, применяет смелый стиль on-tap, Это также происходит для paper-tabs например.

Таким образом, жирный стиль применяется, потому что вы нажимаете на элемент. Однако, если вы переходите на страницу непосредственно через URL-адрес, вы фактически не щелкаете по элементу, поэтому вы не получаете такое же поведение.

Решение:

У вас всегда будет класс iron-selected на текущий активный элемент, будь то через URL или по нажатию.

Из документации:

железный селектор не стилизован. Использовать iron-selected Класс CSS для стилизации выбранного элемента.

Попробуйте это

  <style>
    .iron-selected {
      background: #eee;
    }
  </style>