Pass context.styleContainer to DomHandler.createInlineStyle

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

Hide file tree

Showing 13 changed files with 16 additions and 16 deletions.
diff --git a/components/lib/carousel/Carousel.js b/components/lib/carousel/Carousel.js
@@ -350,7 +350,7 @@ export const Carousel = React.memo(
 
         const createStyle = () => {
             if (!carouselStyle.current) {
-                carouselStyle.current = DomHandler.createInlineStyle((context && context.nonce) || PrimeReact.nonce);
+                carouselStyle.current = DomHandler.createInlineStyle((context && context.nonce) || PrimeReact.nonce, context && context.styleContainer);
             }
 
             let innerHTML = `

diff --git a/components/lib/cascadeselect/CascadeSelect.js b/components/lib/cascadeselect/CascadeSelect.js
@@ -218,7 +218,7 @@ export const CascadeSelect = React.memo(
 
         const createStyle = () => {
             if (!styleElementRef.current) {
-                styleElementRef.current = DomHandler.createInlineStyle((context && context.nonce) || PrimeReact.nonce);
+                styleElementRef.current = DomHandler.createInlineStyle((context && context.nonce) || PrimeReact.nonce, context && context.styleContainer);
 
                 const selector = `${attributeSelectorState}_panel`;
                 const innerHTML = `

diff --git a/components/lib/contextmenu/ContextMenu.js b/components/lib/contextmenu/ContextMenu.js
@@ -74,7 +74,7 @@ export const ContextMenu = React.memo(
 
         const createStyle = () => {
             if (!styleElementRef.current) {
-                styleElementRef.current = DomHandler.createInlineStyle((context && context.nonce) || PrimeReact.nonce);
+                styleElementRef.current = DomHandler.createInlineStyle((context && context.nonce) || PrimeReact.nonce, context && context.styleContainer);
 
                 const selector = `${attributeSelectorState}`;
                 const innerHTML = `

diff --git a/components/lib/datatable/DataTable.js b/components/lib/datatable/DataTable.js
@@ -791,12 +791,12 @@ export const DataTable = React.forwardRef((inProps, ref) => {
     };
 
     const createStyleElement = () => {
-        styleElement.current = DomHandler.createInlineStyle((context && context.nonce) || PrimeReact.nonce);
+        styleElement.current = DomHandler.createInlineStyle((context && context.nonce) || PrimeReact.nonce, context && context.styleContainer);
     };
 
     const createResponsiveStyle = () => {
         if (!responsiveStyleElement.current) {
-            responsiveStyleElement.current = DomHandler.createInlineStyle((context && context.nonce) || PrimeReact.nonce);
+            responsiveStyleElement.current = DomHandler.createInlineStyle((context && context.nonce) || PrimeReact.nonce, context && context.styleContainer);
 
             let tableSelector = `.p-datatable-wrapper ${isVirtualScrollerDisabled() ? '' : '> .p-virtualscroller'} > .p-datatable-table`;
             let selector = `.p-datatable[${attributeSelector.current}] > ${tableSelector}`;

diff --git a/components/lib/dialog/Dialog.js b/components/lib/dialog/Dialog.js
@@ -389,7 +389,7 @@ export const Dialog = React.forwardRef((inProps, ref) => {
     };
 
     const createStyle = () => {
-        styleElement.current = DomHandler.createInlineStyle((context && context.nonce) || PrimeReact.nonce);
+        styleElement.current = DomHandler.createInlineStyle((context && context.nonce) || PrimeReact.nonce, context && context.styleContainer);
 
         let innerHTML = '';
 

diff --git a/components/lib/galleria/GalleriaThumbnails.js b/components/lib/galleria/GalleriaThumbnails.js
@@ -344,7 +344,7 @@ export const GalleriaThumbnails = React.memo(
 
         const createStyle = () => {
             if (!thumbnailsStyle.current) {
-                thumbnailsStyle.current = DomHandler.createInlineStyle((context && context.nonce) || PrimeReact.nonce);
+                thumbnailsStyle.current = DomHandler.createInlineStyle((context && context.nonce) || PrimeReact.nonce, context && context.styleContainer);
             }
 
             let innerHTML = `

diff --git a/components/lib/megamenu/MegaMenu.js b/components/lib/megamenu/MegaMenu.js
@@ -992,7 +992,7 @@ export const MegaMenu = React.memo(
 
         const createStyle = () => {
             if (!styleElementRef.current) {
-                styleElementRef.current = DomHandler.createInlineStyle((context && context.nonce) || PrimeReact.nonce);
+                styleElementRef.current = DomHandler.createInlineStyle((context && context.nonce) || PrimeReact.nonce, context && context.styleContainer);
 
                 const selector = `${attributeSelectorState}`;
                 const innerHTML = `

diff --git a/components/lib/orderlist/OrderList.js b/components/lib/orderlist/OrderList.js
@@ -321,7 +321,7 @@ export const OrderList = React.memo(
 
         const createStyle = () => {
             if (!styleElementRef.current) {
-                styleElementRef.current = DomHandler.createInlineStyle((context && context.nonce) || PrimeReact.nonce);
+                styleElementRef.current = DomHandler.createInlineStyle((context && context.nonce) || PrimeReact.nonce, context && context.styleContainer);
 
                 let innerHTML = `
 @media screen and (max-width: ${props.breakpoint}) {

diff --git a/components/lib/overlaypanel/OverlayPanel.js b/components/lib/overlaypanel/OverlayPanel.js
@@ -173,7 +173,7 @@ export const OverlayPanel = React.forwardRef((inProps, ref) => {
 
     const createStyle = () => {
         if (!styleElement.current) {
-            styleElement.current = DomHandler.createInlineStyle((context && context.nonce) || PrimeReact.nonce);
+            styleElement.current = DomHandler.createInlineStyle((context && context.nonce) || PrimeReact.nonce, context && context.styleContainer);
 
             let innerHTML = '';
 

diff --git a/components/lib/picklist/PickList.js b/components/lib/picklist/PickList.js
@@ -222,7 +222,7 @@ export const PickList = React.memo(
 
         const createStyle = () => {
             if (!styleElementRef.current) {
-                styleElementRef.current = DomHandler.createInlineStyle((context && context.nonce) || PrimeReact.nonce);
+                styleElementRef.current = DomHandler.createInlineStyle((context && context.nonce) || PrimeReact.nonce, context && context.styleContainer);
 
                 let innerHTML = `
 @media screen and (max-width: ${props.breakpoint}) {

diff --git a/components/lib/tieredmenu/TieredMenu.js b/components/lib/tieredmenu/TieredMenu.js
@@ -520,7 +520,7 @@ export const TieredMenu = React.memo(
 
         const createStyle = () => {
             if (!styleElementRef.current) {
-                styleElementRef.current = DomHandler.createInlineStyle((context && context.nonce) || PrimeReact.nonce);
+                styleElementRef.current = DomHandler.createInlineStyle((context && context.nonce) || PrimeReact.nonce, context && context.styleContainer);
 
                 const selector = `${attributeSelectorState}`;
                 const innerHTML = `

diff --git a/components/lib/utils/DomHandler.js b/components/lib/utils/DomHandler.js
@@ -1067,19 +1067,19 @@ export default class DomHandler {
         return false;
     }
 
-    static createInlineStyle(nonce) {
+    static createInlineStyle(nonce, styleContainer = document.head) {
         let styleElement = document.createElement('style');
 
         DomHandler.addNonce(styleElement, nonce);
-        document.head.appendChild(styleElement);
+        styleContainer.appendChild(styleElement);
 
         return styleElement;
     }
 
     static removeInlineStyle(styleElement) {
         if (this.isExist(styleElement)) {
             try {
-                document.head.removeChild(styleElement);
+                styleElement.parentNode.removeChild(styleElement);
             } catch (error) {
                 // style element may have already been removed in a fast refresh
             }

diff --git a/components/lib/utils/utils.d.ts b/components/lib/utils/utils.d.ts
@@ -80,7 +80,7 @@ export declare class DomHandler {
     static applyStyle(el: HTMLElement, style: any): void;
     static exportCSV(csv: any, filename: string): void;
     static saveAs(file: { name: string; url: any }): boolean;
-    static createInlineStyle(nonce?: string): HTMLStyleElement;
+    static createInlineStyle(nonce?: string, styleContainer?: ShadowRoot | HTMLElement): HTMLStyleElement;
     static removeInlineStyle(styleElement: HTMLStyleElement): HTMLStyleElement | null;
     static getTargetElement(target: any): HTMLElement | null;
 }