KEMBAR78
feat: implement initial version of CSSInjectionMixin by web-padawan · Pull Request #8934 · vaadin/web-components · GitHub
Skip to content

Conversation

@web-padawan
Copy link
Member

@web-padawan web-padawan commented Apr 11, 2025

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 web-padawan requested a review from vursen April 11, 2025 12:15
@web-padawan web-padawan force-pushed the feat/css-injection-mixin branch from f897fe5 to b9e5a3d Compare April 11, 2025 12:18
@web-padawan web-padawan requested a review from tomivirkki April 11, 2025 13:10
@web-padawan
Copy link
Member Author

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

@web-padawan web-padawan force-pushed the feat/css-injection-mixin branch from bcd96d8 to 2c34760 Compare April 14, 2025 08:11
}

// Observe custom property that would trigger injection for this class
this.#styleObserver.observe(this.#rootHost, cssInjectPropName);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this also be unobserved in componentDisconnected?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

@web-padawan web-padawan force-pushed the feat/css-injection-mixin branch from 6fec8e8 to 1b998dc Compare April 18, 2025 09:24
@sonarqubecloud
Copy link

@web-padawan web-padawan removed the request for review from vursen April 23, 2025 07:26
@web-padawan web-padawan merged commit c39047e into main Apr 23, 2025
8 checks passed
@web-padawan web-padawan deleted the feat/css-injection-mixin branch April 23, 2025 07:29
@vaadin-bot
Copy link
Collaborator

This ticket/PR has been released with Vaadin 24.8.0.alpha6 and is also targeting the upcoming stable 24.8.0 version.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants