Add link theme for vaadin-tab

[web-padawan]

Fixes #81

This feature was inspired by work on the elements-viewer navigation where I had to use absolute positioning to achieve what I needed: https://github.com/web-padawan/elements-viewer/blob/master/src/viewer-link.html#L13

@jouni PTAL

---

This change is 

[jouni]

Instead of an explicit theme="link", I would just use negative margin on the slotted a element.

[web-padawan]

Instead of an explicit theme="link", I would just use negative margin on the slotted a element.

Done.

---

Review status: 0 of 1 files reviewed at latest revision, all discussions resolved.

---

Comments from Reviewable

[heruan]

I think it's important then to check if the click event has special keys involved (e.g. control/meta) since in that case the tab selection should not occur since the link could be opened in a new browser tab/window.

[web-padawan]

Closing this now as the theme-only change is obviously not enough. Will figure out a better way to implement this later.

[heruan]

Could this PR + vaadin/vaadin-list-mixin/pull/30 be a solution? To this I'd force the color of links and add the style for hovered ones, e.g.

      :host ::slotted(a) {
        display: flex;
        align-items: center;
        width: calc(100% + 2em);
        height: 100%;
        margin: -.25em -1em;
        padding: .25em 1em;
        text-decoration: none;
-       color: inherit;
+       color: inherit !important;
        outline: none;
      }
+     :host ::slotted(a:hover) {
+       text-decoration: none !important;
+     }

Also, icons inside the anchor should be styled the same as icons inside the tab (aside, on top, etc.).

[heruan]

Pretty much this: vaadin/vaadin-tabs/compare/master...heruan:links-in-tab 😄

[jouni]

::slotted(a) > * are unsupported selectors. You can only match the first hierarchy level of the slotted content, AFAIK.

[heruan]

Interesting, somehow it renders correctly: https://jsfiddle.net/heruan/rz60k8a2/

From the inspector it seems the selector matches, at least in Safari and Firefox. Out of the spec but supported by browsers, maybe?

[jouni]

Firefox is still polyfilled (no native shadow), so that’s why it works – the polyfill doesn’t strip the stuff after ::slotted(). Could be a a bug in Safari, as I do remember seeing inconsistent behavior regarding this between Chrome and Safari. So I would not at least expect it to work reliably.

[heruan]

Got it, thank you! Tested in Chrome too and it works, but I understand it's not reliable if out of the spec.

I've placed this on a local theme-for style and I'm happy with it for the moment (there's still the "click with modifiers" issue, see vaadin/vaadin-list-mixin/pull/30), at least until someone comes up with a more reliable solution!