Description
Add an href property and bind it to an anchor tag.
If no href is specified, the anchor tag will be no link, it will not influence the behavior of the paper-item.
If a href is specified, the anchor tag will be a link, making custom <a href="..." tabindex="-1"><pap... build unnecessary.
https://www.w3schools.com/tags/tag_a.asp
if it has no href attribute, it is only a placeholder for a hyperlink
The anchor can be styled to fill the paper-item, get its own mixin, and other anchor attributes could be optionally bound to the properties, tabindex could be handled by the element.
The change could also be made in all potential linkable elements (iron-linkable-behavior, iron-anchor-behavior?), giving an consistent way of linking elements. For example linking an paper-tab is completly different from linking an paper-item now.
Polymer 2.0 is not stable yet, so it could be introduced.
I could draft an PR if desired.
Proposal
paper-item-behavior.html
...
properties: {
href: {
type: String,
notify: true
}
}
...
paper-item.html
...
<a href$="[[href]]">
<slot></slot>
</a>
...
Useage
<!-- The change does not effect an normal paper-item. -->
<paper-item>Some normal item</paper-item>
<!-- But it gives the possibility to be linked. -->
<paper-item href="/some/link.html">Some linked item</paper-item>
Items that could use this behavior:
- paper-item
- paper-icon-item
- paper-button
- paper-icon-button
- paper-fab
- paper-tab