CODEWITHSUNDEEP
csspolymer
peoplesparkresident
peoplesparkresident

Reputation: 1371

How can I prevent links from breaking styling in Polymer?

What I'm seeing in Polymer, a lot of styles are inherited from the surrounding document.

So for example, the following snippet:

    <paper-toolbar>
      <paper-icon-button icon="book"></paper-icon-button>
      <span class="title">Polymer Starter Kit</span>
      <paper-button id="signin-button">Sign In</paper-button>
    </paper-toolbar>

will display the icon and the button with a white foreground color and do some stuff to the spacing.

However, if I add a link, it'll break the style inheritance:

    <paper-toolbar>
      <a href="/"><paper-icon-button icon="book"></paper-icon-button></a>
      <span class="title">SkillCraft</span>
      <paper-button id="signin-button">Sign In</paper-button>
    </paper-toolbar>

Does anybody know what the proper way to correct this/deal with this is?

Upvotes: 2

Views: 75

Answers (1)

Fraser Crosbie
Fraser Crosbie

Reputation: 1762

The Polymer components were not designed to be used inside a href. The simplest way to achieve similar functionality would be to add a click event to the component that pulls the url from a custom attribute.

<paper-icon-button class="link" icon="book" href="/"></paper-button>

<script>
  document.querySelectorAll('.link').addEventListener('click', function(e) {
    window.location.href = e.target.getAttribute('href');
  })
</script>

Upvotes: 1

Related Questions