shadow root

public/content.html

@@ -50,7 +50,7 @@
 
           var title = document.querySelector("#addtitle");
           title.innerHTML =
-            "<div><p>second title</p><ul><li><p>second title</p></li></ul></div>";
+            "<div><p>second title</p><ul><li>second title</li><li><p>second title</p></li></ul></div>";
         }, 1000);
       });
     </script>

src/libs/translator.js

@@ -144,13 +144,19 @@ export class Translator {
 
   _querySelectorAll = (selector, node) => {
     try {
-      return node.querySelectorAll(selector);
+      return Array.from(node.querySelectorAll(selector));
     } catch (err) {
       console.log(`[querySelectorAll err]: ${selector}`);
     }
     return [];
   };
 
+  _queryFilter = (selector, rootNode) => {
+    return this._querySelectorAll(selector, rootNode).filter(
+      (node) => this._queryFilter(selector, node).length === 0
+    );
+  };
+
   _queryNodes = (rootNode = document) => {
     // const childRoots = Array.from(rootNode.querySelectorAll("*"))
     //   .map((item) => item.shadowRoot)
@@ -174,7 +180,7 @@ export class Translator {
             outNodes.forEach((outNode) => {
               if (outNode.shadowRoot) {
                 this._rootNodes.add(outNode.shadowRoot);
-                this._querySelectorAll(inSelector, outNode.shadowRoot).forEach(
+                this._queryFilter(inSelector, outNode.shadowRoot).forEach(
                   (item) => {
                     this._tranNodes.add(item);
                   }
@@ -183,7 +189,7 @@ export class Translator {
             });
           }
         } else {
-          this._querySelectorAll(selector, rootNode).forEach((item) => {
+          this._queryFilter(selector, rootNode).forEach((item) => {
             this._tranNodes.add(item);
           });
         }