Polymer – Making paper-item a link but keep selected styling

[rhsyg03]

Following the docs, I’ve added an anchor around the paper-item, however a few things slightly complicate the issue.

Firstly, the anchor overrights the color and adds an underline. No biggie, can style that.

Secondly, when used with paper-menu, the iron-selected class which bolds the selected item binds to the anchor and not paper-item.

<a name="view1" href="/view1" class="iron-selected">
<paper-icon-item>
<iron-icon icon="home" item-icon></iron-icon>
Home
</paper-icon-item>
</a>

Doing something with css seems pretty hacky?

.nav-core__link {
color: var(--primary-text-color);
text-decoration: none;
}
.nav-core__link.iron-selected paper-icon-item {
font-weight:bold;
}

Is there a less hacky method available?

[Author]

Posts