Add docs for StyleContainer

primefaces · Jan 5, 2024 · a3c0dac · a3c0dac
1 parent 18ef7fe
commit a3c0dac
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 1 deletion.
diff --git a/components/doc/configuration/appendtodoc.js b/components/doc/configuration/appendtodoc.js
@@ -27,7 +27,7 @@ export default function MyApp({ Component }) {
             <DocSectionText {...props}>
                 <p>
                     For components with an overlay like a dropdown, popups can be mounted either into the component or DOM element instance using this option. Valid values are any DOM Element like document body and <i>self</i>. By default all popups
-                    are append to document body via Portals.
+                    are appended to document body via Portals.
                 </p>
             </DocSectionText>
             <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />

diff --git a/components/doc/configuration/stylecontainer.js b/components/doc/configuration/stylecontainer.js
@@ -0,0 +1,39 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyleContainer(props) {
+    const code = {
+        basic: `
+//_app.js
+import { PrimeReactProvider } from 'primereact/api';
+
+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>
+);
+`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    This option allows <i>useStyle</i> to insert dynamic CSS styles into a specific container. This is useful when styles need to be scoped such as in a{' '}
+                    <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM" target="_blank">
+                        Shadow DOM
+                    </a>
+                    . By default all dynamic styles are appended to <i>document.head</i>.
+                </p>
+            </DocSectionText>
+            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+        </>
+    );
+}
diff --git a/pages/configuration/index.js b/pages/configuration/index.js
@@ -1,5 +1,6 @@
 import { DocComponent } from '@/components/doc/common/doccomponent';
 import { AppendToDoc } from '@/components/doc/configuration/appendtodoc';
+import { StyleContainer } from '@/components/doc/configuration/stylecontainer';
 import { CSSTransitionDoc } from '@/components/doc/configuration/csstransitiondoc';
 import { FilterMatchModeDoc } from '@/components/doc/configuration/filtermatchmodedoc';
 import { HideOverlaysDoc } from '@/components/doc/configuration/hideoverlaysdoc';
@@ -20,6 +21,11 @@ const InstallationPage = () => {
             label: 'AppendTo',
             component: AppendToDoc
         },
+        {
+            id: 'stylecontainer',
+            label: 'StyleContainer',
+            component: StyleContainer
+        },
         {
             id: 'csstransition',
             label: 'CSS Transition',