Lumo tab with links: color and text-decoration override slotted selector

[web-padawan]

Description

When applying the following style modules, they affect slotted links:

  <custom-style>
    <style include="lumo-typography lumo-color"></style>
  </custom-style>

Reason is that external CSS (1, 2) have higher specificity than ::slotted selector does.

Expected outcome

No text decoration on slotted links, and their color is the same as in tabs.

Actual outcome

Text decoration applies and the link color is changed.

Steps to reproduce

1. Put a vaadin-tabs element in the page
2. Add the custom-style from the snippet above
3. Add the slotted link to the tab

Browsers Affected

All browsers (the CSS works that way by design).

[lkraav]

Now I'm having serious trouble overriding this !important rule.

Global CSS my-element vaadin-tab > a:hover { text-decoration: underline dotted !important; } still fails to render, even though FF70 browser inspector displays it as an enabled and winning rule. What am I missing?

EDIT it could be this https://stackoverflow.com/a/54974802/35946

When comparing two declarations that have different tree contexts, then for normal rules the declaration earlier in the shadow-including tree order [the first, global rule] wins, and for important rules the declaration coming later in the shadow-including tree [the second, ::slotted(*) rule] order wins.
Note: This is the opposite of how scoped styles work.

So this means only a style module would help?

EDIT Answer is "yes".

[web-padawan]

Unfortunately, this is kinda by design. We probably can't revert it without a breaking change.