Merge pull request #2398 from WillsonSmith/parse5-utils-support-templ…

…ates fix(parse5-utils): add support for templates
modernweb-dev · Aug 4, 2023 · 7bd56e1 · 7bd56e1
2 parents f40a5b2 + d5da0e4
commit 7bd56e1
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 1 deletion.
diff --git a/.changeset/soft-meals-smash.md b/.changeset/soft-meals-smash.md
@@ -0,0 +1,5 @@
+---
+'@web/parse5-utils': patch
+---
+
+Adds support for traversing <template> elements
diff --git a/packages/parse5-utils/src/index.js b/packages/parse5-utils/src/index.js
@@ -215,7 +215,19 @@ function findNodes(nodes, test) {
     if (test(node)) {
       found.push(node);
     }
-    const children = adapter.getChildNodes(/** @type {ParentNode} */ (node));
+
+    /** @type {Node[]} */
+    let children = [];
+
+    if (adapter.isElementNode(node) && adapter.getTagName(node) === 'template') {
+      const content = adapter.getTemplateContent(node);
+      if (content) {
+        children = adapter.getChildNodes(content);
+      }
+    } else {
+      children = adapter.getChildNodes(/** @type {ParentNode} */ (node));
+    }
+
     if (Array.isArray(children)) {
       n.unshift(...children);
     }

diff --git a/packages/parse5-utils/test/index.test.js b/packages/parse5-utils/test/index.test.js
@@ -288,6 +288,21 @@ describe('parse5-utils', () => {
       const found = utils.findElements(doc, el => utils.hasAttribute(el, 'non-existing'));
       expect(found.length).to.equal(0);
     });
+
+    it('returns child elements within template elements', () => {
+      const doc = parse(`
+      <html>
+        <body>
+          <template>
+            <img src="foo.png" />
+          </template>
+        </body>
+      </html>
+    `);
+
+      const found = utils.findElements(doc, el => utils.hasAttribute(el, 'src'));
+      expect(found.length).to.equal(1);
+    });
   });
 
   describe('prependToDocument', () => {