Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: CSS insertion when using ShadowDom #16567 #17646

Draft
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

fxprunayre
Copy link

@fxprunayre fxprunayre commented Feb 12, 2025

When using ShadowDOM mode an application using primeng 18+ styles are not applied because inserted in document.head. Those styles are not available in shadowRoot.

Changes

It looks like insertion rules should be:

  • variables can be inserted in document
  • component styles must be inserted in
    • child shadowRoot (if the component use ViewEncapsulation.ShadowDom)
    • getRootNode (if a component is a child of shadowRoot)

Remaining issues:

  • it looks like a component does not insert styles if already present in the page (issue is that one can be in shadowRoot and the other on higher level)
  • common styles are not available in shadowRoot

Example on the carousel component

  • Carousel component using ViewEncapsulation.None

image

  • Carousel component using ViewEncapsulation.ShadowDom - no style

image

  • Carousel component using ShadowDom encapsulation with this PR - carousel is styled but sub component like button are missing styles (and probably common styles are also missing)

image

Example of a simple application using the primeng table

When using encapsulation: ViewEncapsulation.ShadowDom

image

instead of

image

Any help from a more experimented user on the theming system would be appreciated!

Related to #16567

When using ShadowDOM mode an application using primeng 18+ styles are not applied.

It looks like insertion rules should be:
* variables can be inserted in `document`
* component styles must be inserted in
 * child shadowRoot (if the component use `ViewEncapsulation.ShadowDom`)
 * getRootNode (if a component is a child of shadowRoot)

Remaining issues:
* it looks like a component does not insert styles if already present in
  the page (issue is that one can be in shadowRoot and the other the
higher level)
* common styles are not available in shadowRoot

Related to primefaces#16567
Copy link

vercel bot commented Feb 12, 2025

Deployment failed with the following error:

Creating the Deployment Timed Out.

@fxprunayre fxprunayre marked this pull request as draft February 12, 2025 08:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant