Streams searching for targets inside a template

src/elements/stream_element.js

@@ -167,22 +167,31 @@ export class StreamElement extends HTMLElement {
   }
 
   get targetElementsById() {
+    const elements = []
     const element = this.ownerDocument?.getElementById(this.target)
 
     if (element !== null) {
-      return [element]
-    } else {
-      return []
+      elements.push(element)
+    }
+
+    for (const template of (this.ownerDocument?.querySelectorAll("template") || [])) {
+      const elementInTemplate = template.content.getElementById(this.target)
+
+      if (elementInTemplate !== null) {
+        elements.push(elementInTemplate)
+      }
     }
+
+    return elements
   }
 
   get targetElementsByQuery() {
-    const elements = this.ownerDocument?.querySelectorAll(this.targets)
+    const elements = [...(this.ownerDocument?.querySelectorAll(this.targets) || [])]
 
-    if (elements.length !== 0) {
-      return Array.prototype.slice.call(elements)
-    } else {
-      return []
+    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 id="messages" class="messages">
+        <div class="message">Message inside template</div>
+      </div>
+    </template>
+
   </body>
 </html>

src/tests/functional/stream_tests.js

@@ -14,7 +14,7 @@ test.beforeEach(async ({ page }) => {
   await readEventLogs(page)
 })
 
-test("receiving a stream message", async ({ page }) => {
+test("receiving a stream message for single target", async ({ page }) => {
   const messages = await page.locator("#messages .message")
 
   assert.deepEqual(await messages.allTextContents(), ["First"])
@@ -25,6 +25,27 @@ test("receiving a stream message", async ({ page }) => {
   assert.deepEqual(await messages.allTextContents(), ["First", "Hello world!"])
 })
 
+test("receiving a stream message for single target 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-target button")
+  await nextBeat()
+
+  messagesInTemplate = await templateNode.evaluate(fetchMessagesInTemplateNode)
+
+  assert.deepEqual(messagesInTemplate, ["Message inside template", "Hello world!"])
+})
+
 test("dispatches a turbo:before-stream-render event", async ({ page }) => {
   await page.click("#append-target button")
   await nextEventNamed(page, "turbo:submit-end")
@@ -50,6 +71,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(`