ui5-webcomponents icon indicating copy to clipboard operation
ui5-webcomponents copied to clipboard

make addCustomCSS theme aware

Open MarcusNotheis opened this issue 3 years ago • 0 comments

Feature Request Description

We have the use case that we want to inject custom css via addCustomCSS only for a specific (custom) theme. If the app is running in e.g. sap_fiori_3, the custom css should not be applied.

Proposed Solution

Option 1 Add a third optional parameter theme to addCustomCSS. If it is omitted, the added custom css will be applied in all themes. If it is passed, the custom css will only be applied in the given theme.

Option 2 Use the ::part() api instead of addCustomCSS. Downside of this approach would be every element inside of the shadow root would need a part attribute.

Proposed Alternatives

We could use the host-context selector and add the current theme e.g. to the html tag. Downsides are poor browser support and it might even get removed in chrome (https://github.com/w3c/csswg-drafts/issues/3699)

Priority

  • [ ] Low
  • [x] Medium
  • [ ] High
  • [ ] Very High

Stakeholder Info (if applicable)

  • Organization: UI5 Web Components for React, SAP Industry and Customer Advisory

MarcusNotheis avatar Jan 13 '22 10:01 MarcusNotheis