fix(std): shadowless element should inject styles in parent node

packages/framework/block-std/src/view/element/shadowless-element.ts

@@ -1,33 +1,93 @@
+import type { Constructor } from '@blocksuite/global/utils';
 import type { CSSResultGroup, CSSResultOrNative } from 'lit';
 
 import { CSSResult, LitElement } from 'lit';
 
 export class ShadowlessElement extends LitElement {
-  static disableShadowRoot = true;
+  // Map of the number of styles injected into a node
+  // A reference count of the number of ShadowlessElements that are still connected
+  static connectedCount = new WeakMap<
+    Constructor, // class
+    WeakMap<Node, number>
+  >();
 
+  static onDisconnectedMap = new WeakMap<
+    Constructor, // class
+    (() => void) | null
+  >();
+
+  // styles registered in ShadowlessElement will be available globally
+  // even if the element is not being rendered
   protected static override finalizeStyles(
     styles?: CSSResultGroup
   ): CSSResultOrNative[] {
-    let elementStyles = super.finalizeStyles(styles);
-    if (this.disableShadowRoot) {
-      // XXX: This breaks component encapsulation and applies styles to the document.
-      // These styles should be manually scoped.
+    const elementStyles = super.finalizeStyles(styles);
+    // XXX: This breaks component encapsulation and applies styles to the document.
+    // These styles should be manually scoped.
+    elementStyles.forEach((s: CSSResultOrNative) => {
+      if (s instanceof CSSResult && typeof document !== 'undefined') {
+        const styleRoot = document.head;
+        const style = document.createElement('style');
+        style.textContent = s.cssText;
+        styleRoot.append(style);
+      }
+    });
+    return elementStyles;
+  }
+
+  private getConnectedCount() {
+    const SE = this.constructor as typeof ShadowlessElement;
+    return SE.connectedCount.get(SE)?.get(this.getRootNode()) ?? 0;
+  }
+
+  private setConnectedCount(count: number) {
+    const SE = this.constructor as typeof ShadowlessElement;
+
+    if (!SE.connectedCount.has(SE)) {
+      SE.connectedCount.set(SE, new WeakMap());
+    }
+
+    SE.connectedCount.get(SE)?.set(this.getRootNode(), count);
+  }
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    const parentRoot = this.getRootNode();
+    const SE = this.constructor as typeof ShadowlessElement;
+    const insideShadowRoot = parentRoot instanceof ShadowRoot;
+    const styleInjectedCount = this.getConnectedCount();
+
+    if (styleInjectedCount === 0 && insideShadowRoot) {
+      const elementStyles = SE.elementStyles;
+      const injectedStyles: HTMLStyleElement[] = [];
       elementStyles.forEach((s: CSSResultOrNative) => {
         if (s instanceof CSSResult && typeof document !== 'undefined') {
-          const styleRoot = document.head;
           const style = document.createElement('style');
           style.textContent = s.cssText;
-          styleRoot.append(style);
+          parentRoot.prepend(style);
+          injectedStyles.push(style);
         }
       });
-      elementStyles = [];
+      SE.onDisconnectedMap.set(SE, () => {
+        injectedStyles.forEach(style => style.remove());
+      });
     }
-    return elementStyles;
+    this.setConnectedCount(styleInjectedCount + 1);
   }
 
   override createRenderRoot() {
-    return (this.constructor as typeof ShadowlessElement).disableShadowRoot
-      ? this
-      : super.createRenderRoot();
+    return this;
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    const SE = this.constructor as typeof ShadowlessElement;
+    let styleInjectedCount = this.getConnectedCount();
+    styleInjectedCount--;
+    this.setConnectedCount(styleInjectedCount);
+
+    if (styleInjectedCount === 0) {
+      SE.onDisconnectedMap.get(SE)?.();
+    }
   }
 }