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/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);
         }
       });
   };