feat: 支持 Web Component Shadow DOM 内容翻译#101
Open
cpxGithub wants to merge 1 commit intoxnx3:masterfrom
Open
Conversation
新增 translate.element.shadowComponent 模块，通过四处最小改动实现 Shadow DOM 穿透能力，不改动任何现有逻辑： 1. 新增 shadowComponent 模块（WeakSet 防重复 + observe/scanAndObserve 方法） 2. whileNodes 中穿透 shadowRoot，天然支持任意嵌套深度 3. listener.callback 检测动态新增的 shadow host 并注册监听 4. addListener 启动时一次性扫描全页已有 shadow host 覆盖场景：初始翻译、动态渲染、动态挂载、嵌套 Web Component、closed shadow root 静默跳过
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
问题描述
translate.js 目前无法翻译 Web Component 内部通过
attachShadow()创建的 Shadow DOM 内容。原因在于：node.childNodes，无法穿透 Shadow DOM 边界MutationObserver仅观察 Light DOM，Shadow DOM 内的动态变化无法被捕获改动内容
新增
translate.element.shadowComponent模块，共 4 处最小改动（56 行新增，不改动任何现有逻辑）：shadowComponent模块：基于WeakSet实现防重复注册，observe()将 shadowRoot 纳入现有 MutationObserver，scanAndObserve()递归扫描嵌套 shadow hostwhileNodes穿透 shadowRoot：每次翻译扫描时自动进入 shadow DOM，天然支持任意嵌套深度listener.callback检测动态新增的 shadow host：Web Component 动态挂载时立即注册监听addListener启动时扫描全页已有 shadow host：弥补 listener 启动晚于组件挂载的时序差覆盖场景
closed模式 shadow root性能
WeakSet.has()O(1) 判重，shadow host 移除后自动 GCnode.shadowRoot属性读取 O(1)，每次whileNodes一次scanAndObserve()仅在 listener 启动时执行一次