fix: support rendering into ShadowRoot containers (#223)

* fix: fix Shadow DOM rendering issues

* fix: cr

* chore：remove queryInShadowRoots

Author: xxMudCloudxx

__tests__/unit/options/parse-options.test.ts

@@ -198,6 +198,18 @@ describe('parseOptions', () => {
     );
   });
 
+  it('accepts a ShadowRoot instance as the container target', () => {
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+
+    const shadowRoot = host.attachShadow({ mode: 'open' });
+    const parsed = parseOptions({
+      container: shadowRoot,
+    } as any);
+
+    expect(parsed.container).toBe(shadowRoot);
+  });
+
   it('skips design when structure is null', () => {
     itemMap.set('custom-item', {
       type: 'custom-item',

src/options/parser.ts

@@ -52,7 +52,7 @@ export function parseOptions(
       : undefined;
 
   const parsed: Partial<ParsedInfographicOptions> = {
-    container: parsedContainer as HTMLElement,
+    container: parsedContainer as Element | 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;
+  /** 容器，可以是选择器、Element 或 ShadowRoot */
+  container?: string | Element | ShadowRoot;
   /** 宽度 */
   width?: number | string;
   /** 高度 */
@@ -37,7 +37,7 @@ export interface InfographicOptions {
 }
 
 export interface ParsedInfographicOptions {
-  container: HTMLElement;
+  container: Element | ShadowRoot;
   width?: number | string;
   height?: number | string;
   padding?: Padding;

src/renderer/renderer.ts

@@ -86,7 +86,7 @@ export class Renderer implements IRenderer {
       });
 
       try {
-        observer.observe(document, {
+        observer.observe(this.options.container, {
           childList: true,
           subtree: true,
         });