Fix rendering when container is a ShadowRoot

[Copilot]

Passing a ShadowRoot as the container option caused the infographic to render invisibly — postRender() (which sets the viewBox and loads fonts) was never called because the MutationObserver was hardcoded to observe document, which never receives mutation events for nodes inserted into a shadow tree.

Changes

• src/options/types.ts: Widened InfographicOptions.container to string | HTMLElement | ShadowRoot; same for ParsedInfographicOptions.container.
• src/options/parser.ts: Updated type cast to match widened container type.
• src/renderer/renderer.ts: Resolve the correct observation root before registering the MutationObserver — shadow root if the container is (or is hosted inside) a ShadowRoot, otherwise document.
• Docs: Updated infographic-options.md / .en.md to reflect the new accepted container type.

Usage

const host = document.getElementById('host');
const shadowRoot = host.attachShadow({ mode: 'open' });
const container = document.createElement('div');
shadowRoot.appendChild(container);

const ig = new Infographic({
  container: shadowRoot, // or the inner HTMLElement
  width: 900,
  height: 600,
});
await ig.render(spec);

Original prompt

---

This section details on the original issue you should resolve

<issue_title>传入的dom如果是一个shadow dom，则无法正确渲染</issue_title>
<issue_description></issue_description>

<agent_instructions>try to resolve this issue</agent_instructions>

Comments on the Issue (you are @copilot in this section)

@xxMudCloudxx 复现demo： ```html <title>Infographic Shadow DOM reproduction</title> <style> body { font-family: sans-serif; margin: 20px; } #host { border: 1px solid #ddd; background: #fff; min-height: 620px; padding: 8px; } #log { margin-top: 16px; padding: 12px; background: #f7f7f7; border: 1px solid #e5e5e5; white-space: pre-wrap; font-family: Consolas, monospace; font-size: 12px; } </style>

Shadow DOM reproduction

<script src="./dist/infographic.min.js"></script>

<script>
  (async function () {
    const logEl = document.getElementById('log');
    const log = (msg) => (logEl.textContent += msg + '\n');

    if (!window.AntVInfographic) {
      log('AntVInfographic 未加载成功，请先检查脚本路径。');
      return;
    }

    const { Infographic, setDefaultFont } = window.AntVInfographic;
    setDefaultFont(
      "'Times New Roman', Times, Georgia, serif, SimSun, STSong",
    );

    const spec = `infographic sequence-pyramid-simple

data
title 数字化转型层级
items
- label 战略创新
desc 数据驱动决策
- label 分析平台
desc 企业洞察
- label 数据整合
desc 统一数据源
- label 基础设施
desc 云和系统基础`;

    const host = document.getElementById('host');
    const shadowRoot = host.attachShadow({ mode: 'open' });

    const style = document.createElement('style');
    style.textContent = `
    #container {
      min-height: 600px;
      background: #fff;
    }
  `;
    shadowRoot.appendChild(style);

    const container = document.createElement('div');
    container.id = 'container';
    shadowRoot.appendChild(container);

    try {
      // 复现方式 1：传 ShadowRoot
      const ig = new Infographic({
        container: shadowRoot,
        width: 900,
        height: 600,
        padding: 24,
      });

      ig.on('rendered', () => log('[OK] rendered'));
      ig.on('error', (err) => log('[ERR] ' + (err?.stack || err)));

      await ig.render(spec);
    } catch (err) {
      log('[THROW] ' + (err?.stack || err));
    }
  })();
</script>

</comments>

• Fixes 传入的dom如果是一个shadow dom，则无法正确渲染 #222

---

📍 Connect Copilot coding agent with Jira, Azure Boards or Linear to delegate work to Copilot in one click without leaving your project management tool.