Keeping child windows styles in sync with parent #393

david-trumid · 2023-06-22T16:56:39Z

david-trumid
Jun 22, 2023

We are using MUI and have dynamic styles that update on mounting/unmounting a component right before it is loaded into the child window. The easiest (and least code/buggy) approach we have found is to add an observer in the popout.html file in the head section like so..

 <script>
      const headElement = window.opener.document.querySelector('head');

      // Create a new MutationObserver instance
      const observer = new MutationObserver((mutationsList) => {
        // Check each mutation for added stylesheets
        for (const mutation of mutationsList) {
          if (mutation.type === 'childList') {
            Array.from(mutation.addedNodes).forEach(
              (node) =>
               {
                if ((node.tagName === 'LINK' && node.rel === 'stylesheet') || node.tagName === 'STYLE') {
                  document.head.appendChild(node.cloneNode(true))
                }
              }
            );
          }
        }
      });

      // Start observing mutations on the parnet opener <head> element
      observer.observe(headElement, { childList: true });
    </script>

this will keep the child window updated with new styles (removes are slightly more complicated because it is a clone of the root window node), and will continue to add injected styles into child window and redocking will reset it

david-trumid · 2023-08-18T18:55:11Z

david-trumid
Aug 18, 2023
Author

to be clear the better approach is to wrap the child component in a jss or styles provider, we had to extend FloatingTab to wrap FloatingWindow with custom HOC

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Keeping child windows styles in sync with parent #393

{{title}}

Replies: 1 comment

{{title}}

Select a reply

Keeping child windows styles in sync with parent #393

david-trumid Jun 22, 2023

Replies: 1 comment

david-trumid Aug 18, 2023 Author

david-trumid
Jun 22, 2023

david-trumid
Aug 18, 2023
Author