Streams searching for single target inside a template

# Conflicts:
#	src/elements/stream_element.js
#	src/tests/functional/stream_tests.js

src/elements/stream_element.js

@@ -167,19 +167,27 @@ 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() {
     let elements = [...this.ownerDocument?.querySelectorAll(this.targets)];
-    
+
     for (const template of this.ownerDocument?.querySelectorAll("template")) {
       elements.push(...template.content.querySelectorAll(this.targets))
     }

src/tests/fixtures/stream.html

@@ -41,7 +41,7 @@
     </div>
 
     <template id="messages_template">
-      <div class="messages">
+      <div id="messages" class="messages">
         <div class="message">Message inside template</div>
       </div>
     </template>

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")