PrimeTek

`useStyle` configurable head / style wrapper to allow use in shadow DOM #630

Closed Answered by melloware

mondaychen asked this question in PrimeReact

mondaychen
Dec 6, 2023

I'm building an app inside of a shadow DOM so that the CSS would conflict with other parts of the page.
Currently, useStyle appends styles into document.head https://github.com/primefaces/primereact/blob/01c6ef2c035b93845d64bb516c03267461f9f613/components/lib/hooks/useStyle.js#L30
This would not work well with shadow DOM because it requires adding its styles inside of ShadowRoot.

Can we make it configurable via PrimeReactProvider, similar to appendTo?

If this sounds good, I already have the patch and can submit a PR

Answered by melloware

I think your issue is similar to this? primefaces/primereact#5246

If not can you open a new Issue and then link your proposed PR to that?

View full answer

Replies: 1 comment 5 replies

melloware
Dec 6, 2023
Collaborator

I think your issue is similar to this? primefaces/primereact#5246

If not can you open a new Issue and then link your proposed PR to that?

5 replies

mondaychen Dec 6, 2023
Author

Ah yes. It should be the same thing.
I'll submit a PR within this week!

mondaychen Dec 6, 2023
Author

@melloware do you think styleContainer is a good name for the new value in PrimeReactProvider for this purpose?

melloware Dec 6, 2023
Collaborator

Sure

mondaychen Dec 10, 2023
Author

PR: primefaces/primereact#5566

melloware Dec 10, 2023
Collaborator

Looks good I will test it out tomorrow!

Answer selected by melloware

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