Skip to content

fix: support rendering into ShadowRoot containers#223

Merged
Aarebecca merged 3 commits intoantvis:mainfrom
xxMudCloudxx:fix/shadow-render
Mar 20, 2026
Merged

fix: support rendering into ShadowRoot containers#223
Aarebecca merged 3 commits intoantvis:mainfrom
xxMudCloudxx:fix/shadow-render

Conversation

@xxMudCloudxx
Copy link
Copy Markdown
Contributor

原因应该是在 renderer 中:Renderer.render() 先把SVG设成 visibility: hidden ,然后它是通过 MutationObserver 来恢复的,但是这个 observer 只监听了 document ,所以 document 上的 MutationObserver 看不到 ShadowRoot 内部的新增节点,所以 postRender() 没有执行,结果就是 removerProperty("visibility") 没有执行。

fix:#222

@gemini-code-assist
Copy link
Copy Markdown
Contributor

Summary of Changes

Hello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

此拉取请求旨在解决当渲染目标位于 ShadowRoot 内部时,渲染器无法正确完成渲染过程的问题。通过修改容器解析逻辑和 MutationObserver 的观察机制,现在可以确保在 ShadowRoot 环境下,SVG 元素的可见性能够被正确恢复,从而提升了组件在复杂 Web 组件环境中的兼容性和稳定性。

Highlights

  • ShadowRoot 容器支持: 现在支持将 ShadowRoot 实例作为渲染容器,扩展了组件的部署灵活性。
  • 增强的容器解析: 改进了容器解析逻辑,使其能够识别并解析 ShadowRoot 内部的元素选择器,确保即使在封装的 DOM 环境中也能找到正确的渲染目标。
  • MutationObserver 行为优化: 调整了 MutationObserver 的观察目标和 subtree 选项,以正确处理 ShadowRoot 中的节点添加事件,解决了渲染器在 ShadowRoot 环境下无法完成渲染的问题。
Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here.

Footnotes

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

这个 PR 旨在支持将图表渲染到 ShadowRoot 中,这是一个很棒的功能增强。整体实现思路是正确的,通过修改容器解析逻辑来查找 Shadow DOM 中的元素,并调整 MutationObserver 的观察目标。

代码审查发现了一些可以改进的地方:

  1. renderer.ts 中,MutationObserversubtree 选项被错误地设置为 false,这可能导致在某些情况下 SVG 无法被正确检测到。
  2. 同样在 renderer.ts 中,getObservationTarget 函数存在冗余代码。
  3. 测试代码中存在一些不正确的类型转换和可以简化的实现。

我已经对这些问题提出了具体的修改建议。修复这些问题后,代码将更加健壮和清晰。

@codecov-commenter
Copy link
Copy Markdown

codecov-commenter commented Mar 18, 2026

Codecov Report

❌ Patch coverage is 50.00000% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 46.29%. Comparing base (31e571d) to head (a1b42ee).

Files with missing lines Patch % Lines
src/renderer/renderer.ts 0.00% 1 Missing ⚠️
Additional details and impacted files

Impacted file tree graph

@@           Coverage Diff           @@
##             main     #223   +/-   ##
=======================================
  Coverage   46.29%   46.29%           
=======================================
  Files         341      341           
  Lines       28109    28109           
  Branches     2310     2310           
=======================================
  Hits        13014    13014           
  Misses      15083    15083           
  Partials       12       12           
Flag Coverage Δ
infographic 46.29% <50.00%> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines Coverage Δ
src/options/parser.ts 93.26% <100.00%> (ø)
src/options/types.ts 100.00% <ø> (ø)
src/renderer/renderer.ts 76.16% <0.00%> (ø)
🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@xxMudCloudxx
Copy link
Copy Markdown
Contributor Author

为了避免“字符串 selector 穿透 Shadow DOM”的扫描成本只能遵循以下准则:

  • 普通 DOM 支持 container: '#id'
  • Shadow DOM 场景请直接传 Element 或 ShadowRoot

@xxMudCloudxx
Copy link
Copy Markdown
Contributor Author

渲染问题解决了,但是还存在一个编辑器的问题:
当设置 editable: true 且信息图位于 Shadow Tree 内部时,插件UI(如 EditBar 和 ResetViewBox)会渲染在组件外部,不再属于同一个 Shadow 边界。因此,尽管 API 现在可以接受 ShadowRoot 作为容器,但内置的编辑 UI 会出现错位或失效的问题。
晚点我修下~

@xxMudCloudxx
Copy link
Copy Markdown
Contributor Author

针对编辑器的ShadowRoot修改比较多,我拆成一个新的pr提交 #224 ,这个pr应该可以了

@Aarebecca Aarebecca merged commit 27d239a into antvis:main Mar 20, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants