feat #5246: add styleContainer option for PrimeReactContext

[mondaychen]

Fix #5246
Fix #4096

As discussed in https://github.com/orgs/primefaces/discussions/630#discussion-5931944, this is to add styleContainer in PrimeReactContext so that developers can configure useStyle to insert into a specific container. This is needed when building the app within a shadow dom.

Example use:

root.attachShadow({ mode: 'open' }); // Open the shadowRoot
const mountHere = root.shadowRoot;

const options = { appendTo: mountHere, styleContainer: mountHere};

ReactDOM.createRoot(mountHere).render(
  <React.StrictMode>
    <PrimeReactProvider value={options}>
      <App />
    </PrimeReactProvider>
  </React.StrictMode>
);

To seem it working:

1. Clone https://github.com/mondaychen/prime-react-style-container-repro/
2. run npm install && npm run dev

(Note this is the same as the reproducer in #5246 except use of new option styleContainer is added, but I had to make a repo because on stackblitz.com I was not able to point to github in package.json like https://github.com/mondaychen/prime-react-style-container-repro/blob/main/package.json#L13 (git command is unavailable in terminal)

Before (Dropdown style broken):

After:

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

2 Ignored Deployments

Name	Status	Preview	Comments	Updated (UTC)
primereact	⬜️ Ignored (Inspect)	Visit Preview		Jan 5, 2024 9:55pm
primereact-v9	⬜️ Ignored (Inspect)	Visit Preview		Jan 5, 2024 9:55pm

[melloware]

Can you check the code base there are other places where styles are added using DomHandler.createInlineStyle() and removeInlineStyle() which I assume would have the same problem?

[mondaychen]

@melloware ah nice catch.
How about we add an optional 2nd parameter as styleContainer for createInlineStyle? So the usage is changed to

DomHandler.createInlineStyle(
  (context && context.nonce) || PrimeReact.nonce,
  context && context.styleContainer
);

For removeInlineStyle I think instead of document.head.removeChild(styleElement) we can just do styleElement.parentNode.removeChild(styleElement)

[melloware]

Yep definitely pass a second param!

[melloware]

Also don't forget to update the docs example here: https://primereact.org/configuration/

[mondaychen]

Sorry I've been sick these days. Will get back to this once I'm recovered

[melloware]

@mondaychen you still working on this?

[mondaychen]

@melloware Yes I will continue to work on this once I'm back from holiday break. Is there a deadline or is it considered an urgent issue now?

[melloware]

Awesome. No I was just checking in on you.

[mondaychen]

@melloware updated DomHandler and added docs

[mondaychen]

In the "AppendTo" section it says "By default all popups are append to document body via Portals.", so I used a similar sentence. But should we say "appended" instead?
I'm not native speaker so wanna confirm first

[SoyDiego]

In the "AppendTo" section it says "By default all popups are append to document body via Portals.", so I used a similar sentence. But should we say "appended" instead?
I'm not native speaker so wanna confirm first

Maybe @melloware can help here

[melloware]

Yes it should be "appended" !

"By default all popups are appended to the document body via Portals.

[melloware]

@mondaychen let me know when this is ready but it looks good to me!

[mondaychen]

Updated the text & it's ready! @melloware