feat: auto pierce deep shadow dom (#297)

* feat: auto pierce deep shadow dom

* fix: observe all shadow DOM child element changes

* chore: remove >>> selector require note for shadow DOM

src/config/i18n.js

@@ -543,9 +543,9 @@ export const I18N = {
     zh_TW: `1. 支援星號 (*) 萬用字元。2. 多個 URL 請以換行或英文逗號「,」分隔。`,
   },
   selector_helper: {
-    zh: `1、遵循CSS选择器语法。2、多个CSS选择器之间用“;”隔开。3、“shadow root”选择器和内部选择器用“>>>”隔开。`,
-    en: `1. Follow CSS selector syntax. 2. Separate multiple CSS selectors with ";". 3. The "shadow root" selector and the internal selector are separated by ">>>".`,
-    zh_TW: `1. 遵循 CSS 選擇器語法。2. 多個 CSS 選擇器以「;」分隔。3.「shadow root」與內部選擇器以「>>>」分隔。`,
+    zh: `1、遵循CSS选择器语法。2、多个CSS选择器之间用“;”隔开。`,
+    en: `1. Follow CSS selector syntax. 2. Separate multiple CSS selectors with ";".`,
+    zh_TW: `1. 遵循 CSS 選擇器語法。2. 多個 CSS 選擇器以「;」分隔。`,
   },
   translate_switch: {
     zh: `开启翻译`,

src/libs/translator.js

@@ -16,6 +16,7 @@ import {
   DEFAULT_FETCH_LIMIT,
   DEFAULT_FETCH_INTERVAL,
 } from "../config";
+import { querySelectorAllDeep } from "query-selector-shadow-dom";
 import Content from "../views/Content";
 import { updateFetchPool, clearFetchPool } from "./fetch";
 import { debounce, genEventName, getHtmlText } from "./utils";
@@ -206,9 +207,14 @@ export class Translator {
 
   _querySelectorAll = (selector, node) => {
     try {
-      return Array.from(node.querySelectorAll(selector));
+      return querySelectorAllDeep(selector, node);
     } catch (err) {
-      kissLog(selector, "querySelectorAll err");
+      kissLog(selector, "querySelectorAllDeep err");
+      try {
+        return Array.from(node.querySelectorAll(selector));
+      } catch (fallbackErr) {
+        kissLog(selector, "querySelectorAll fallback err");
+      }
     }
     return [];
   };
@@ -235,6 +241,16 @@ export class Translator {
       });
   };
 
+  _addAllShadowRootsToMonitoring = (rootNode) => {
+    Array.from(rootNode.querySelectorAll("*"))
+      .map((item) => item.shadowRoot)
+      .filter(Boolean)
+      .forEach((shadowRoot) => {
+        this._rootNodes.add(shadowRoot);
+        this._addAllShadowRootsToMonitoring(shadowRoot);
+      });
+  };
+
   _queryNodes = (rootNode = document) => {
     // const childRoots = Array.from(rootNode.querySelectorAll("*"))
     //   .map((item) => item.shadowRoot)
@@ -275,6 +291,7 @@ export class Translator {
               this._tranNodes.set(item, "");
             }
           });
+          this._addAllShadowRootsToMonitoring(rootNode);
         }
       });
   };