diff --git a/__tests__/unit/options/parse-options.test.ts b/__tests__/unit/options/parse-options.test.ts index ed3d08d79..d4d22ca1a 100644 --- a/__tests__/unit/options/parse-options.test.ts +++ b/__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', diff --git a/src/options/parser.ts b/src/options/parser.ts index 7f5df7644..27fc7aa16 100644 --- a/src/options/parser.ts +++ b/src/options/parser.ts @@ -52,7 +52,7 @@ export function parseOptions( : undefined; const parsed: Partial = { - container: parsedContainer as HTMLElement, + container: parsedContainer as Element | ShadowRoot, padding: parsePadding(padding), }; diff --git a/src/options/types.ts b/src/options/types.ts index b8312a276..11fcaa8b4 100644 --- a/src/options/types.ts +++ b/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; diff --git a/src/renderer/renderer.ts b/src/renderer/renderer.ts index 01422d0bc..71203b422 100644 --- a/src/renderer/renderer.ts +++ b/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, });