feat: add SlotStylesMixin for injecting styles

[web-padawan]

Description

I was hoping to avoid this but looks like this is the way to go. Based on the prototype.
There will be a follow-up PR which uses this mixin to add styles to vaadin-number-field e.g. like this:

  get slotStyles() {
    return {
      ...super.slotStyles,
      number: `
        /* Hide the native arrow icons */
        input[type="number"]::-webkit-outer-spin-button,
        input[type="number"]::-webkit-inner-spin-button {
          -webkit-appearance: none;
          margin: 0;
        }
        input[type="number"] {
          -moz-appearance: textfield;
        }
      `
    };
  }

Note, this could be used by some components like vaadin-tab to cover cases like the one mentioned in #872

<vaadin-tab>
  <a href="/employee-list">
    <vaadin-icon icon="vaadin:list"></vaadin-icon>
    <span>Employee list</span>
  </a>
</vaadin-tab>

Part of #2436

Type of change

• Feature

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
1 Code Smell

No Coverage information
0.0% Duplication

[vaadin-bot]

This ticket/PR has been released with platform 22.0.0.alpha3 and is also targeting the upcoming stable 22.0.0 version.