Fix rendering when container is a ShadowRoot

site/src/content/reference/infographic-options.en.md

@@ -8,8 +8,8 @@ The following lists the detailed type definition for `InfographicOptions`.
 
 ```typescript
 interface InfographicOptions {
-  /** Container selector or HTMLElement */
-  container?: string | HTMLElement;
+  /** Container selector, HTMLElement, or ShadowRoot */
+  container?: string | HTMLElement | ShadowRoot;
   /** Width */
   width?: number | string;
   /** Height */

site/src/content/reference/infographic-options.md

@@ -8,8 +8,8 @@ title: 配置
 
 ```typescript
 interface InfographicOptions {
-  /** 容器，可以是选择器或者 HTMLElement */
-  container?: string | HTMLElement;
+  /** 容器，可以是选择器、HTMLElement 或 ShadowRoot */
+  container?: string | HTMLElement | ShadowRoot;
   /** 宽度 */
   width?: number | string;
   /** 高度 */

src/options/parser.ts

@@ -52,7 +52,7 @@ export function parseOptions(
       : undefined;
 
   const parsed: Partial<ParsedInfographicOptions> = {
-    container: parsedContainer as HTMLElement,
+    container: parsedContainer as HTMLElement | ShadowRoot,
     padding: parsePadding(padding),
   };
 

src/options/types.ts

@@ -5,8 +5,8 @@ import type { Data, Padding, ParsedData } from '../types';
 import type { Path } from '../utils';
 
 export interface InfographicOptions {
-  /** 容器，可以是选择器或者 HTMLElement */
-  container?: string | HTMLElement;
+  /** 容器，可以是选择器、HTMLElement 或 ShadowRoot */
+  container?: string | HTMLElement | ShadowRoot;
   /** 宽度 */
   width?: number | string;
   /** 高度 */
@@ -37,7 +37,7 @@ export interface InfographicOptions {
 }
 
 export interface ParsedInfographicOptions {
-  container: HTMLElement;
+  container: HTMLElement | ShadowRoot;
   width?: number | string;
   height?: number | string;
   padding?: Padding;

src/renderer/renderer.ts

@@ -85,8 +85,21 @@ export class Renderer implements IRenderer {
         });
       });
 
+      // When the container is a ShadowRoot (or is hosted inside one), observe
+      // that shadow root so the MutationObserver fires when the SVG is inserted.
+      const { container } = this.options;
+      let observeRoot: Document | ShadowRoot = document;
+      if (container instanceof ShadowRoot) {
+        observeRoot = container;
+      } else if (container) {
+        const root = container.getRootNode();
+        if (root instanceof ShadowRoot) {
+          observeRoot = root;
+        }
+      }
+
       try {
-        observer.observe(document, {
+        observer.observe(observeRoot, {
           childList: true,
           subtree: true,
         });