Use a simpler but more effective shadow DOM workaround (#95)

Author: mattpap

ipywidgets_bokeh/src/widget.ts

@@ -4,9 +4,8 @@ import {UIElement} from "@bokehjs/models/ui/ui_element"
 import {Document} from "@bokehjs/document"
 import {MessageSentEvent} from "@bokehjs/document/events"
 import * as p from "@bokehjs/core/properties"
-import {isString, isObject} from "@bokehjs/core/util/types"
+import {isString} from "@bokehjs/core/util/types"
 import {assert} from "@bokehjs/core/util/assert"
-import {values} from "@bokehjs/core/util/object"
 
 import {generate_require_loader} from "./loader"
 import {WidgetManager, ModelBundle} from "./manager"
@@ -15,27 +14,6 @@ import {WidgetView} from "@jupyter-widgets/base"
 
 const widget_managers: WeakMap<Document, WidgetManager> = new WeakMap()
 
-declare type Module = {
-  id: string
-  loaded: boolean
-  exports: {[key: string]: unknown}
-}
-
-declare type UseOptions = {
-  handler?(css: string): void
-}
-
-declare type StyleModule = Module & {
-  exports: {
-    default: {
-      use(options?: UseOptions): void
-      unuse(): void
-    }
-  }
-}
-
-declare const __webpack_module_cache__: {[key: string]: Module}
-
 export class IPyWidgetView extends LayoutDOMView {
   container: HTMLDivElement
   override model: IPyWidget
@@ -47,29 +25,32 @@ export class IPyWidgetView extends LayoutDOMView {
     return []
   }
 
-  protected _ipy_stylesheets(): StyleSheetLike[] {
-    const stylesheets: StyleSheetLike[] = []
+  override connect_signals(): void {
+    super.connect_signals()
 
-    function handler(raw_css: string): void {
-      const css = raw_css.replace(/:root/g, ":host")
-      stylesheets.push(new InlineStyleSheet(css))
-    }
-
-    function is_StyleModule(module: Module): module is StyleModule {
-      const {exports} = module
-      return isObject(exports.default) && "use" in exports.default
-    }
+    const observer = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        for (const node of [...mutation.addedNodes, ...mutation.removedNodes]) {
+          if (node instanceof HTMLStyleElement) {
+            this._update_stylesheets()
+            break
+          }
+        }
+      }
+    })
+    observer.observe(document.head, {childList: true})
+  }
 
-    const modules = values(__webpack_module_cache__)
-    const css_modules = modules.filter(({id, exports}) => id.endsWith(".css") && "default" in exports)
-    const style_modules = css_modules.filter(is_StyleModule)
+  protected _ipy_stylesheets(): StyleSheetLike[] {
+    const stylesheets: StyleSheetLike[] = []
 
-    for (const module of style_modules) {
-      const style = module.exports.default
-      try {
-        style.use({handler})
-      } catch {
-        console.error("failed to apply a stylesheet")
+    for (const child of document.head.children) {
+      if (child instanceof HTMLStyleElement) {
+        const raw_css = child.textContent
+        if (raw_css != null) {
+          const css = raw_css.replace(/:root/g, ":host")
+          stylesheets.push(new InlineStyleSheet(css))
+        }
       }
     }
 
@@ -82,7 +63,7 @@ export class IPyWidgetView extends LayoutDOMView {
 
   override render(): void {
     super.render()
-    this.container = div({style: "display: contents;"})
+    this.container = div({style: "display: contents;"}) // ipywidgets' APIs require HTMLElement, not DocumentFragment
     this.shadow_el.append(this.container)
     this._render().then(() => {
       this.invalidate_layout() // TODO: this may be overzealous; probably should be removed

ipywidgets_bokeh/webpack.config.js

@@ -1,19 +1,8 @@
 const path = require("path");
 const version = require('./package.json').version;
 
-const style_loader = {
-  loader: "style-loader",
-  options: {
-    injectType: "lazyStyleTag",
-    insert: (element, options) => {},
-    styleTagTransform: (css, style, options) => {
-      options.handler(css)
-    },
-  },
-}
-
 const rules = [
-  { test: /\.css$/, use: [style_loader, "css-loader"] },
+  { test: /\.css$/, use: ["style-loader", "css-loader"] },
   // required to load font-awesome
   { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, use: "url-loader?limit=10000&mimetype=application/font-woff" },
   { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, use: "url-loader?limit=10000&mimetype=application/font-woff" },