feat: implement initial version of CSSInjectionMixin

[web-padawan]

Description

Part of vaadin/platform#7453

Added CSSInjectionMixin that allows injecting CSS into components using the following syntax:

html, :host {
  --vaadin-item-css-inject: 1;
}

@media vaadin-item {
  /* These styles go into shadow root */

  [part="content"] {
    /* styles */
  }
}

Above styles can be injected either in a document or in a shadow root of some parent component.

Type of change

• Feature

Note

Can be tested in /dev/lumo-injection/ pages using this branch:
https://github.com/vaadin/web-components/tree/proto/css-injection

[web-padawan]

@tomivirkki Marked you as a reviewer for this PR, it's optional but your feedback would be highly appreciated.

[web-padawan]

This relies on the assumption that the new base styles will use @layer but maybe we could improve this:

• Update finalizeStyles() method in ThemableMixin to store styles from static get styles() separately
• Have some unified helper that would then apply styles in the right order when updating instance styles:
  • first, styles from static get styles()
  • next, styles injected by CSSInjector
  • finally, styles added with registerStyles()

If this sounds reasonable, I will prototype this in a separate branch.

[web-padawan]

UPD: implemented this logic in a new commit and updated tests accordingly.

[tomivirkki]

Should this also be unobserved in componentDisconnected?

[web-padawan]

I was thinking that maybe we could unobserve root host when there are no more components added to it (especially if it's not the document but a shadow root host). This could be implemented in a follow-up PR.

[sonarqubecloud]

Quality Gate passed

Issues
2 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[yuriy-fix]

nit: Set<string>