From b715b32cb44e0115748a89372ee2a476a95de5e9 Mon Sep 17 00:00:00 2001
From: Mario Buikhuizen <mariobuikhuizen@widgetti.io>
Date: Fri, 1 Dec 2023 19:30:42 +0100
Subject: [PATCH] fix: sub popout elements are missing styles (#2580)

* fix: sub popout elements are missing styles
* rename set_style_template_file to _add_style
* docs updates to point to main_styles

---------

Co-authored-by: Kyle Conroy <kyleconroy@gmail.com>
---
 docs/dev/ui_style_guide.rst                   |   2 +
 jdaviz/app.py                                 |  18 +-
 jdaviz/app.vue                                | 265 +-----------------
 .../default/plugins/line_lists/line_lists.vue |   2 +-
 jdaviz/core/launcher.py                       |   2 +-
 jdaviz/core/marks.py                          |   2 +-
 jdaviz/core/template_mixin.py                 |  11 +-
 jdaviz/main_styles.vue                        | 262 +++++++++++++++++
 jdaviz/style_registry.py                      |  47 ++++
 9 files changed, 335 insertions(+), 276 deletions(-)
 create mode 100644 jdaviz/main_styles.vue
 create mode 100644 jdaviz/style_registry.py

diff --git a/docs/dev/ui_style_guide.rst b/docs/dev/ui_style_guide.rst
index d507f70f25..e970b72da2 100644
--- a/docs/dev/ui_style_guide.rst
+++ b/docs/dev/ui_style_guide.rst
@@ -8,6 +8,8 @@ Tray Plugins
 In order to be consistent with layout, styling, and spacing, UI development on plugins should
 try to adhere to the following principles:
 
+* CSS intended to be applied app-wide should live in ``main_styles.vue`` so that they are available
+  to all popout instances via ``PopoutStyleWrapper`` (exists on anything that inherits ``TemplateMixin``).
 * Any tray plugin should utilize ``<j-tray-plugin :disabled_msg='disabled_msg' :popout_button="popout_button">`` as the
   outer-container (which provides consistent styling rules).  If the plugin makes use of active status
   (live-preview marks or viewer callbacks), then also pass `` :uses_active_status="uses_active_status" @plugin-ping="plugin_ping($event)"``.
diff --git a/jdaviz/app.py b/jdaviz/app.py
index 4117876481..92b419e3ee 100644
--- a/jdaviz/app.py
+++ b/jdaviz/app.py
@@ -43,13 +43,13 @@
 from ipyvuetify import VuetifyTemplate
 
 from jdaviz import __version__
+from jdaviz import style_registry
 from jdaviz.core.config import read_configuration, get_configuration
 from jdaviz.core.events import (LoadDataMessage, NewViewerMessage, AddDataMessage,
                                 SnackbarMessage, RemoveDataMessage,
                                 AddDataToViewerMessage, RemoveDataFromViewerMessage,
                                 ViewerAddedMessage, ViewerRemovedMessage,
                                 ViewerRenamedMessage)
-from jdaviz.core.style_widget import StyleWidget
 from jdaviz.core.registries import (tool_registry, tray_registry, viewer_registry,
                                     data_parser_registry)
 from jdaviz.core.tools import ICON_DIR
@@ -154,6 +154,9 @@ def to_unit(self, data, cid, values, original_units, target_units):
 ipyvue.register_component_from_file('g-viewer-tab', "container.vue", __file__)
 
 
+style_registry.instance.add((__file__, 'main_styles.vue'))
+
+
 class ApplicationState(State):
     """
     The application state object contains all the current front-end state,
@@ -252,6 +255,7 @@ class Application(VuetifyTemplate, HubListener):
     vdocs = Unicode("").tag(sync=True)
     docs_link = Unicode("").tag(sync=True)
     popout_button = Any().tag(sync=True, **widget_serialization)
+    style_registry_instance = Any().tag(sync=True, **widget_serialization)
 
     def __init__(self, configuration=None, *args, **kwargs):
         super().__init__(*args, **kwargs)
@@ -259,6 +263,7 @@ def __init__(self, configuration=None, *args, **kwargs):
         self._verbosity = 'warning'
         self._history_verbosity = 'info'
         self.popout_button = PopoutButton(self)
+        self.style_registry_instance = style_registry.instance
 
         # Generate a state object for this application to maintain the state of
         #  the user interface.
@@ -407,19 +412,18 @@ def history_verbosity(self, val):
             raise ValueError(f'Invalid verbosity: {val}')
         self._history_verbosity = val
 
-    def set_style_template_file(self, path):
+    def _add_style(self, path):
         """
-        Sets the path to a vue file containing a <style> tag that will be applied on top of the
-        style defined in ``app.vue``.  This is useful for config-specific or downstream styling
-        at the app-level.
+        Appends an addition vue file containing a <style> tag that will be applied on top of the
+        style defined in ``main_styles.vue``.  This is useful for config-specific or downstream
+        styling at the app-level.
 
         Parameters
         ----------
         path : str or tuple
             Path to a ``.vue`` file containing style rules to inject into the app.
         """
-        style_widget = StyleWidget(path)
-        self.state.style_widget = "IPY_MODEL_" + style_widget.model_id
+        style_registry.instance.add(path)
 
     def _on_snackbar_message(self, msg):
         """
diff --git a/jdaviz/app.vue b/jdaviz/app.vue
index 2cff6119ba..c5bb5464ed 100644
--- a/jdaviz/app.vue
+++ b/jdaviz/app.vue
@@ -1,10 +1,6 @@
 <template>
   <v-app id="web-app" :style="checkNotebookContext() ? 'display: inline' : 'display: flex'" :class="'jdaviz ' + config" ref="mainapp">
-    <jupyter-widget
-      v-if="state.style_widget"
-      :widget="state.style_widget"
-      style="display: none"
-    ></jupyter-widget>
+    <jupyter-widget :widget="style_registry_instance"></jupyter-widget>
     <v-overlay v-if="state.logger_overlay"
       absolute
       opacity="0.7">
@@ -183,36 +179,6 @@ export default {
       window.dispatchEvent(new Event('resize'));
     }
   },
-  created() {
-    this.$vuetify.theme.themes.light = {
-      toolbar: "#153A4B",
-      primary: "#00617E",
-      secondary: "#007DA4",
-      accent: "#C75109",
-      turquoise: "#007BA1",
-      lightblue: "#E3F2FD",  // matches highlighted row in MOS table
-      spinner: "#163C4C",
-      error: '#FF5252',
-      info: '#2196F3',
-      success: '#4CAF50',
-      warning: '#FFC107',
-      gray: '#F8F8F8',
-    };
-    this.$vuetify.theme.themes.dark = {
-      toolbar: "#153A4B",
-      primary: "#00617E",
-      secondary: "#007DA4",
-      accent: "#C75109",
-      turquoise: "#007BA1",
-      lightblue: "#E3F2FD",
-      spinner: "#ACE1FF",
-      error: '#FF5252',
-      info: '#2196F3',
-      success: '#4CAF50',
-      warning: '#FFC107',
-      gray: '#141414',
-    };
-  },
   mounted() {
     /* Workaround for https://github.com/jupyter-widgets/ipywidgets/issues/2499, can be removed when ipywidgets 8 is
      * released */
@@ -223,232 +189,3 @@ export default {
   }
 };
 </script>
-
-<style id="web-app">
-* {
-  /* otherwise, voila will override box-sizing to unset which screws up layouts */
-  box-sizing: border-box !important;
-}
-
-/* fix for loading overlay z-index */
-div.output_wrapper {
-  z-index: auto;
-}
-
-.jd-loading-overlay {
-  position: absolute;
-  inset: 0;
-  background-color: white;
-  z-index: 100;
-  opacity: 0.5;
-}
-
-.v-toolbar__content,
-.vuetify-styles .v-toolbar__content {
-  padding: 0px;
-}
-
-.plugin-expansion-panel-content .row {
-  /* override -12px margins */
-  margin-left: 0px;
-  margin-right: 0px;
-}
-
-.glue__subset-select {
-  display: flex;
-  align-items: center;
-}
-
-.v-tabs-items {
-  height: 100%;
-}
-
-.splitpanes {
-  background-color: #f8f8f8;
-}
-
-.splitpanes__splitter {
-  background-color: #e2e4e8;
-  position: relative;
-  width: 5px;
-}
-
-.lm_goldenlayout {
-  background: #f8f8f8;
-}
-
-.lm_content {
-  background: #ffffff;
-  border: none;
-  /*border-top: 1px solid #cccccc;*/
-}
-
-.lm_splitter {
-  background: #e2e4e8;
-  opacity: 1;
-  z-index: 1;
-}
-
-/* .lm_splitter.lm_vertical {
-  height: 1px !important;
-}
-
-.lm_splitter.lm_horizontal {
-  width: 1px !important;
-} */
-
-.lm_header .lm_tab {
-  padding-top: 0px;
-  margin-top: 0px;
-}
-
-.lm_header ul {
-  padding-left: 0;
-}
-
-.lm_popout {
-  display: none;
-}
-
-.cubeviz .lm_close {
-  display: none !important;
-}
-
-.cubeviz .lm_close_tab {
-  display: none;
-}
-
-.imviz .lm_close {
-  /* hide the close button on the right to prevent closing the default viewer
-     since we cannot easily discriminate between different viewers in the filter here */
-  display: none !important;
-}
-
-.imviz .lm_tab[title="imviz-0"] > .lm_close_tab {
-  /* hide the close button on the tab for imviz-0 only to
-     prevent closing the default viewer */
-  display: none;
-}
-
-.v-toolbar__items .v-btn {
-  /* allow v-toolbar-items styling to pass through tooltip wrapping span */
-  /* css is copied from .v-toolbar__items>.v-btn */
-  border-radius: 0;
-  height: 100% !important;
-  max-height: none;
-}
-
-.v-tooltip__content {
-  background-color: white !important;
-  border-radius: 2px !important;
-  border: 1px #003B4D solid !important;
-  color: black !important;
-}
-
-.v-expansion-panel-content__wrap {
-  padding-left: 12px !important;
-  padding-right: 12px !important;
-}
-
-a:link {
-  text-decoration: none;
-}
-
-a:visited {
-  text-decoration: none;
-}
-
-a:hover {
-  text-decoration: none;
-}
-
-a:active {
-  text-decoration: none;
-}
-
-.invert, .invert-if-dark.theme--dark {
-    filter: invert(1) saturate(1) brightness(100);
-    color: white;
-}
-
-.jdaviz-nested-toolbar, .plugin-nested-toolbar {
-  /* height of nested toolbar to match viewer toolbar height */
-  height: 42px;
-  margin-right: 4px;
-}
-
-.jdaviz-nested-toolbar .v-icon, .jdaviz-nested-toolbar img {
-  /* icons from dark to (consistently) light */
-  filter: invert(1) saturate(1) brightness(100);
-}
-
-.jdaviz-nested-toolbar .v-btn, .plugin-nested-toolbar .v-btn {
-  height: 42px !important;
-  border: none !important;
-  min-width: 42px !important;
-  /* remove "dimming" since we use orange background for active */
-  color: transparent ! important;
-}
-
-.suboptions-carrot {
-  /* tweak margins for different toolbar size */
-  margin-bottom: -28px !important;
-}
-
-.jdaviz-nested-toolbar .v-btn--active, .jdaviz-nested-toolbar .v-btn:focus, .v-toolbar .active, .jdaviz-viewer-toolbar .active {
-  /* active color (orange) */
-  background-color: #c75109 !important;
-}
-
-.plugin-nested-toolbar .v-btn--active, .plugin-nested-toolbar .v-btn:focus {
-  /* semi-transparent active color (orange) */
-  background-color: #c7510996 !important;
-}
-
-.v-divider.theme--dark {
-  /* make the v-divider standout more */
-  border-color: hsla(0,0%,100%,.35) !important;
-}
-
-.no-hint .v-text-field__details {
-  display: none !important;
-}
-
-.color-to-accent {
-  /* https://codepen.io/sosuke/pen/Pjoqqp for #C75109 */
-  filter: brightness(0) saturate(100%) invert(31%) sepia(84%) saturate(1402%) hue-rotate(1deg) brightness(95%) contrast(94%);
-}
-
-.v-overlay__content {
-  position: unset !important;
-}
-
-.jdaviz__content--not-in-notebook {
-  max-height: calc(100% - 48px);
-}
-
-#popout-widget-container .v-application.jdaviz {
-  min-height: 100vh;
-  max-height: 100vh;
-}
-
-#popout-widget-container .jdaviz__content--not-in-notebook {
-  max-height: 100%;
-}
-
-.jupyter-widgets.bqplot.figure {
-  /* When a viewport is resized, a scrollbar can appear, which will impact the
-   * render size of bqplot and results in unused space when the newly rendered
-   * figure is displayed. Using overflow hidden will prevent the scrollbar from
-   * appearing */
-  overflow: hidden;
-}
-
-.jupyter-widgets.bqplot.figure .axislabel {
-    /* consistent with other labels (legend, buttons, plugin expansion menu labels, etc)*/
-    font-size: 15px !important;
-    font-family: Roboto, sans-serif !important;
-    font-weight: 500 !important;
-}
-
-</style>
diff --git a/jdaviz/configs/default/plugins/line_lists/line_lists.vue b/jdaviz/configs/default/plugins/line_lists/line_lists.vue
index ecf8a82c65..039489ab21 100644
--- a/jdaviz/configs/default/plugins/line_lists/line_lists.vue
+++ b/jdaviz/configs/default/plugins/line_lists/line_lists.vue
@@ -30,7 +30,7 @@
       <j-docs-link>Shift spectral lines according to a specific redshift. Only enabled if at least one line is plotted.</j-docs-link>
     </v-row>
     <v-row style='margin-bottom: 0px'>
-      <!-- colors are app.vue primary and toolbar colors -->
+      <!-- colors are main_style.vue primary and toolbar colors -->
       <v-slider
         :value="rs_slider"
         @input="throttledSlider"
diff --git a/jdaviz/core/launcher.py b/jdaviz/core/launcher.py
index 3416699e27..251611368b 100644
--- a/jdaviz/core/launcher.py
+++ b/jdaviz/core/launcher.py
@@ -207,7 +207,7 @@ def show_launcher(configs=ALL_JDAVIZ_CONFIGS, filepath='', height='450px'):
         by the selected configuration. Applies to the launcher and all instances of the same
         application in the notebook.
     '''
-    # Color defined manually due to the custom theme not being defined yet (in app.vue)
+    # Color defined manually due to the custom theme not being defined yet (in main_styles.vue)
     height = f"{height}px" if isinstance(height, int) else height
     main = v.Sheet(class_="mx-25",
                    attributes={"id": "popout-widget-container"},
diff --git a/jdaviz/core/marks.py b/jdaviz/core/marks.py
index 344445d598..1e75b4adcc 100644
--- a/jdaviz/core/marks.py
+++ b/jdaviz/core/marks.py
@@ -339,7 +339,7 @@ def _slice_to_x(self, slice=0):
         return self._x_all[slice]
 
     def _update_colors_opacities(self):
-        # orange (accent) if active, import button blue otherwise (see css in app.vue)
+        # orange (accent) if active, import button blue otherwise (see css in main_styles.vue)
         if not self._show_if_inactive and not self._active:
             self.label.visible = False
             self.visible = False
diff --git a/jdaviz/core/template_mixin.py b/jdaviz/core/template_mixin.py
index 1a530f2f63..303ccb2eb5 100644
--- a/jdaviz/core/template_mixin.py
+++ b/jdaviz/core/template_mixin.py
@@ -41,6 +41,7 @@
                                 AddDataToViewerMessage)
 from jdaviz.core.region_translators import _get_region_from_spatial_subset
 from jdaviz.core.user_api import UserApiWrapper, PluginUserApi
+from jdaviz.style_registry import PopoutStyleWrapper
 from jdaviz.utils import get_subset_type
 
 
@@ -176,7 +177,10 @@ def __new__(cls, *args, **kwargs):
 
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
-        self.popout_button = PopoutButton(self, window_features='popup,width=400,height=600')
+        self.popout_button = PopoutButton(
+            PopoutStyleWrapper(content=self),
+            window_features='popup,width=400,height=600'
+        )
         self._viewer_callbacks = {}
         self.hub.subscribe(self, ViewerRemovedMessage,
                            handler=lambda msg: self._remove_viewer_callbacks(msg.viewer_id))
@@ -3176,7 +3180,10 @@ def __init__(self, plugin, component_type='table', *args, **kwargs):
         super().__init__(*args, **kwargs)
         self._plugin = plugin
         self._component_type = component_type
-        self.popout_button = PopoutButton(self, window_features='popup,width=800,height=300')
+        self.popout_button = PopoutButton(
+            PopoutStyleWrapper(content=self),
+            window_features='popup,width=800,height=300'
+        )
 
     @property
     def display_name(self):
diff --git a/jdaviz/main_styles.vue b/jdaviz/main_styles.vue
new file mode 100644
index 0000000000..fa5e640500
--- /dev/null
+++ b/jdaviz/main_styles.vue
@@ -0,0 +1,262 @@
+<script>
+export default {
+  created() {
+    this.$vuetify.theme.themes.light = {
+      toolbar: "#153A4B",
+      primary: "#00617E",
+      secondary: "#007DA4",
+      accent: "#C75109",
+      turquoise: "#007BA1",
+      lightblue: "#E3F2FD",  // matches highlighted row in MOS table
+      spinner: "#163C4C",
+      error: '#FF5252',
+      info: '#2196F3',
+      success: '#4CAF50',
+      warning: '#FFC107',
+      gray: '#F8F8F8',
+    };
+    this.$vuetify.theme.themes.dark = {
+      toolbar: "#153A4B",
+      primary: "#00617E",
+      secondary: "#007DA4",
+      accent: "#C75109",
+      turquoise: "#007BA1",
+      lightblue: "#E3F2FD",
+      spinner: "#ACE1FF",
+      error: '#FF5252',
+      info: '#2196F3',
+      success: '#4CAF50',
+      warning: '#FFC107',
+      gray: '#141414',
+    };
+  },
+}
+</script>
+
+<style id="jdaviz-main-styles" >
+* {
+  /* otherwise, voila will override box-sizing to unset which screws up layouts */
+  box-sizing: border-box !important;
+}
+
+/* fix for loading overlay z-index */
+div.output_wrapper {
+  z-index: auto;
+}
+
+.jd-loading-overlay {
+  position: absolute;
+  inset: 0;
+  background-color: white;
+  z-index: 100;
+  opacity: 0.5;
+}
+
+.v-toolbar__content,
+.vuetify-styles .v-toolbar__content {
+  padding: 0px;
+}
+
+.plugin-expansion-panel-content .row {
+  /* override -12px margins */
+  margin-left: 0px;
+  margin-right: 0px;
+}
+
+.glue__subset-select {
+  display: flex;
+  align-items: center;
+}
+
+.v-tabs-items {
+  height: 100%;
+}
+
+.splitpanes {
+  background-color: #f8f8f8;
+}
+
+.splitpanes__splitter {
+  background-color: #e2e4e8;
+  position: relative;
+  width: 5px;
+}
+
+.lm_goldenlayout {
+  background: #f8f8f8;
+}
+
+.lm_content {
+  background: #ffffff;
+  border: none;
+  /*border-top: 1px solid #cccccc;*/
+}
+
+.lm_splitter {
+  background: #e2e4e8;
+  opacity: 1;
+  z-index: 1;
+}
+
+/* .lm_splitter.lm_vertical {
+  height: 1px !important;
+}
+
+.lm_splitter.lm_horizontal {
+  width: 1px !important;
+} */
+
+.lm_header .lm_tab {
+  padding-top: 0px;
+  margin-top: 0px;
+}
+
+.lm_header ul {
+  padding-left: 0;
+}
+
+.lm_popout {
+  display: none;
+}
+
+.cubeviz .lm_close {
+  display: none !important;
+}
+
+.cubeviz .lm_close_tab {
+  display: none;
+}
+
+.imviz .lm_close {
+  /* hide the close button on the right to prevent closing the default viewer
+     since we cannot easily discriminate between different viewers in the filter here */
+  display: none !important;
+}
+
+.imviz .lm_tab[title="imviz-0"] > .lm_close_tab {
+  /* hide the close button on the tab for imviz-0 only to
+     prevent closing the default viewer */
+  display: none;
+}
+
+.v-toolbar__items .v-btn {
+  /* allow v-toolbar-items styling to pass through tooltip wrapping span */
+  /* css is copied from .v-toolbar__items>.v-btn */
+  border-radius: 0;
+  height: 100% !important;
+  max-height: none;
+}
+
+.v-tooltip__content {
+  background-color: white !important;
+  border-radius: 2px !important;
+  border: 1px #003B4D solid !important;
+  color: black !important;
+}
+
+.v-expansion-panel-content__wrap {
+  padding-left: 12px !important;
+  padding-right: 12px !important;
+}
+
+a:link {
+  text-decoration: none;
+}
+
+a:visited {
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: none;
+}
+
+a:active {
+  text-decoration: none;
+}
+
+.invert, .invert-if-dark.theme--dark {
+  filter: invert(1) saturate(1) brightness(100);
+  color: white;
+}
+
+.jdaviz-nested-toolbar, .plugin-nested-toolbar {
+  /* height of nested toolbar to match viewer toolbar height */
+  height: 42px;
+  margin-right: 4px;
+}
+
+.jdaviz-nested-toolbar .v-icon, .jdaviz-nested-toolbar img {
+  /* icons from dark to (consistently) light */
+  filter: invert(1) saturate(1) brightness(100);
+}
+
+.jdaviz-nested-toolbar .v-btn, .plugin-nested-toolbar .v-btn {
+  height: 42px !important;
+  border: none !important;
+  min-width: 42px !important;
+  /* remove "dimming" since we use orange background for active */
+  color: transparent ! important;
+}
+
+.suboptions-carrot {
+  /* tweak margins for different toolbar size */
+  margin-bottom: -28px !important;
+}
+
+.jdaviz-nested-toolbar .v-btn--active, .jdaviz-nested-toolbar .v-btn:focus, .v-toolbar .active, .jdaviz-viewer-toolbar .active {
+  /* active color (orange) */
+  background-color: #c75109 !important;
+}
+
+.plugin-nested-toolbar .v-btn--active, .plugin-nested-toolbar .v-btn:focus {
+  /* semi-transparent active color (orange) */
+  background-color: #c7510996 !important;
+}
+
+.v-divider.theme--dark {
+  /* make the v-divider standout more */
+  border-color: hsla(0,0%,100%,.35) !important;
+}
+
+.no-hint .v-text-field__details {
+  display: none !important;
+}
+
+.color-to-accent {
+  /* https://codepen.io/sosuke/pen/Pjoqqp for #C75109 */
+  filter: brightness(0) saturate(100%) invert(31%) sepia(84%) saturate(1402%) hue-rotate(1deg) brightness(95%) contrast(94%);
+}
+
+.v-overlay__content {
+  position: unset !important;
+}
+
+.jdaviz__content--not-in-notebook {
+  max-height: calc(100% - 48px);
+}
+
+#popout-widget-container .v-application.jdaviz {
+  min-height: 100vh;
+  max-height: 100vh;
+}
+
+#popout-widget-container .jdaviz__content--not-in-notebook {
+  max-height: 100%;
+}
+
+.jupyter-widgets.bqplot.figure {
+  /* When a viewport is resized, a scrollbar can appear, which will impact the
+   * render size of bqplot and results in unused space when the newly rendered
+   * figure is displayed. Using overflow hidden will prevent the scrollbar from
+   * appearing */
+  overflow: hidden;
+}
+
+.jupyter-widgets.bqplot.figure .axislabel {
+  /* consistent with other labels (legend, buttons, plugin expansion menu labels, etc)*/
+  font-size: 15px !important;
+  font-family: Roboto, sans-serif !important;
+  font-weight: 500 !important;
+}
+</style>
diff --git a/jdaviz/style_registry.py b/jdaviz/style_registry.py
new file mode 100644
index 0000000000..ce03f2aa48
--- /dev/null
+++ b/jdaviz/style_registry.py
@@ -0,0 +1,47 @@
+from traitlets import Any, Dict, Instance, default
+from ipywidgets import widget_serialization
+from ipyvuetify import VuetifyTemplate
+
+from jdaviz.core.style_widget import StyleWidget
+
+
+class StyleRegistry(VuetifyTemplate):
+    style_widgets = Dict(default_value={}).tag(sync=True, **widget_serialization)
+
+    @default("template")
+    def _template(self):
+        return """
+        <template>
+            <span>
+                <jupyter-widget v-for="style_widget in style_widgets" :widget="style_widget">
+                </jupyter-widget>
+            </span>
+        </template>
+        """
+
+    def add(self, path):
+        if hash(path) in self.style_widgets:
+            return
+        self.style_widgets = {**self.style_widgets, hash(path): StyleWidget(path)}
+
+
+instance = StyleRegistry()
+
+
+class PopoutStyleWrapper(VuetifyTemplate):
+    content = Any().tag(sync=True, **widget_serialization)
+    style_registry_instance = Instance(
+        StyleRegistry,
+        default_value=instance
+    ).tag(sync=True, **widget_serialization)
+
+    @default("template")
+    def _template(self):
+        return """
+        <template>
+            <div>
+                <jupyter-widget :widget="style_registry_instance"></jupyter-widget>
+                <jupyter-widget :widget="content"></jupyter-widget>
+            </div>
+        </template>
+        """