Streams searching for targets inside a template

src/elements/stream_element.js

@@ -176,13 +176,14 @@ export class StreamElement extends HTMLElement {
     }
   }
 
-  get targetElementsByQuery() {
-    const elements = this.ownerDocument?.querySelectorAll(this.targets)
 
-    if (elements.length !== 0) {
-      return Array.prototype.slice.call(elements)
-    } else {
-      return []
+  get targetElementsByQuery() {
+    let elements = [...this.ownerDocument?.querySelectorAll(this.targets)];
+
+    for (const template of this.ownerDocument?.querySelectorAll("template")) {
+      elements.push(...template.content.querySelectorAll(this.targets))
     }
+
+    return elements
   }
 }

src/tests/fixtures/stream.html

@@ -39,5 +39,12 @@
     <div id="container">
       <input id="container-element">
     </div>
+
+    <template id="messages_template">
+      <div class="messages">
+        <div class="message">Message inside template</div>
+      </div>
+    </template>
+
   </body>
 </html>

src/tests/functional/stream_tests.js

@@ -50,6 +50,27 @@ test("receiving a stream message with css selector target", async ({ page }) =>
   assert.deepEqual(await messages3.allTextContents(), ["Third", "Hello CSS!"])
 })
 
+
+test("receiving a stream message with a targets css selector for an element in a template", async ({ page }) => {
+  const templateNode = await page.locator("#messages_template")
+
+  const fetchMessagesInTemplateNode = (node) => {
+    const messagesNode = node.content.querySelector(".messages")
+    return messagesNode.innerText.trim().split(/\s{2,}/g);
+  }
+
+  let messagesInTemplate = await templateNode.evaluate(fetchMessagesInTemplateNode)
+
+  assert.deepEqual(messagesInTemplate, ["Message inside template"])
+
+  await page.click("#append-targets button")
+  await nextBeat()
+
+  messagesInTemplate = await templateNode.evaluate(fetchMessagesInTemplateNode)
+
+  assert.deepEqual(messagesInTemplate, ["Message inside template", "Hello CSS!"])
+})
+
 test("receiving a message without a template", async ({ page }) => {
   await page.evaluate(() =>
     window.Turbo.renderStreamMessage(`