paper-button doesn't follow text-decoration css

[cpboyd]

Description

A recent change seems to have added the underline to text if the paper-button is surrounded by an anchor tag.

As a workaround, I've determined that you can simply use text-decoration on the anchor tag rather than the paper-button.

However, since other text CSS seems to work on the paper-button (like text color in the demo below), I'm thinking this might be a bug.

Expected outcome

You should be able to mark the paper-button with text-decoration: none; and remove any underline added by an anchor tag.

Actual outcome

The text-decoration CSS has no effect on the paper-button.

Live Demo

https://jsfiddle.net/zc6uaed6/

Steps to reproduce

1. Put a paper-button element within an a anchor tag.
2. Attempt to style paper-button, e.g. to remove the underline.

   Browsers Affected

• [X] Chrome
• [ ] Firefox
• [X] Safari 9
• [ ] Safari 8
• [ ] Safari 7
• [ ] Edge
• [ ] IE 11
• [ ] IE 10

[keanulee]

@cpboyd Do you know when this behavior was changed? AFAIK text-decoration: underline is normally applied by <a>s so you need to style the <a> to remove it.

The same example with <paper-button> replaced by generic <span>: http://jsbin.com/yerexob/edit?html,output

[cpboyd]

@keanulee Ah, I see. The span is a good point.

I do know that as late as February or March, I had no underline on the paper button text with an anchor tag. This was without setting the text-decoration on either element.