search

SAP / ui5-webcomponents-react

A wrapper implementation for React of the UI5 Web Components that are compliant with the SAP Fiori User Experience
https://sap.github.io/ui5-webcomponents-react/
Apache License 2.0
446 stars 101 forks source link

[CustomElementsScope]: [setCustomElementsScopingSuffix will cause style broken, shadowDOM missing] #6549

Closed JackieWei closed 4 weeks ago

JackieWei commented 4 weeks ago

Describe the bug

[CustomElementsScope]: [setCustomElementsScopingSuffix will cause style broken, shadowDOM missing] Use setCustomElementsScopingSuffix and setCustomElementsScopingRules to customize ui5 tags in my project, and then all style broken

Isolated Example

https://stackblitz.com/edit/github-wmf1wn-r8quu1?file=src%2Fmain.tsx

Reproduction steps

  1. Enter in example
  2. See that whole style broken
  3. Comment out codes of setCustomElementsScopingSuffix in main.tsx, from line 12 to line 16, style resumed
  4. So the conclusion is that in this version of UI5, the setCustomElementsScopingSuffix will cause style broken ...

Expected Behaviour

Style shold works, shadow dom attached

Screenshots or Videos

No response

UI5 Web Components for React Version

~2.3.0

UI5 Web Components Version

~2.3.0

Browser

Chrome

Operating System

MAC OS

Additional Context

No response

Relevant log output

No response

Organization

No response

Declaration

Lukas742 commented 4 weeks ago

Hi @JackieWei

I will close this issue as there is already another one covering this topic. If you have any questions or more information, please address them in the original issue.

The solution for this problem is also described in the original issue. In essence, setCustomElementsScopingSuffix needs to be called before any custom element was defined (component imported). I adjusted your example to show how this could be achieved: https://stackblitz.com/edit/github-wmf1wn-xu3vcw?file=src%2FapplyScoping.ts,src%2Fmain.tsx

Duplicate of https://github.com/SAP/ui5-webcomponents/issues/10016