deploy: 8849e6b

handbook/building.html

@@ -231,7 +231,7 @@ <h2 id="persisting-elements-across-page-loads"><a class="anchor" href="#persisti
     <li><span>and</span></li>
     <li><a href="https://hey.com" target="_blank" rel="noopener"><img width="122" height="56" src="/assets/logo-hey.svg" alt="HEY"></a></li>
   </ul>
-  <p class="footer__copyright">&copy; 2024 <a href="https://37signals.com" target="_blank" rel="noopener">37signals</a></p>
+  <p class="footer__copyright">&copy; 2025 <a href="https://37signals.com" target="_blank" rel="noopener">37signals</a></p>
 </footer>
 
 

handbook/drive.html

@@ -315,7 +315,7 @@ <h2 id="preload-links-into-the-cache"><a class="anchor" href="#preload-links-int
     <li><span>and</span></li>
     <li><a href="https://hey.com" target="_blank" rel="noopener"><img width="122" height="56" src="/assets/logo-hey.svg" alt="HEY"></a></li>
   </ul>
-  <p class="footer__copyright">&copy; 2024 <a href="https://37signals.com" target="_blank" rel="noopener">37signals</a></p>
+  <p class="footer__copyright">&copy; 2025 <a href="https://37signals.com" target="_blank" rel="noopener">37signals</a></p>
 </footer>
 
 

handbook/frames.html

@@ -252,7 +252,7 @@ <h2 id="pausing-rendering"><a class="anchor" href="#pausing-rendering">﹟</a> P
     <li><span>and</span></li>
     <li><a href="https://hey.com" target="_blank" rel="noopener"><img width="122" height="56" src="/assets/logo-hey.svg" alt="HEY"></a></li>
   </ul>
-  <p class="footer__copyright">&copy; 2024 <a href="https://37signals.com" target="_blank" rel="noopener">37signals</a></p>
+  <p class="footer__copyright">&copy; 2025 <a href="https://37signals.com" target="_blank" rel="noopener">37signals</a></p>
 </footer>
 
 

handbook/installing.html

@@ -170,7 +170,7 @@ <h2 id="in-a-ruby-on-rails-application"><a class="anchor" href="#in-a-ruby-on-ra
     <li><span>and</span></li>
     <li><a href="https://hey.com" target="_blank" rel="noopener"><img width="122" height="56" src="/assets/logo-hey.svg" alt="HEY"></a></li>
   </ul>
-  <p class="footer__copyright">&copy; 2024 <a href="https://37signals.com" target="_blank" rel="noopener">37signals</a></p>
+  <p class="footer__copyright">&copy; 2025 <a href="https://37signals.com" target="_blank" rel="noopener">37signals</a></p>
 </footer>
 
 

handbook/introduction.html

@@ -208,7 +208,7 @@ <h2 id="integrate-with-backend-frameworks"><a class="anchor" href="#integrate-wi
     <li><span>and</span></li>
     <li><a href="https://hey.com" target="_blank" rel="noopener"><img width="122" height="56" src="/assets/logo-hey.svg" alt="HEY"></a></li>
   </ul>
-  <p class="footer__copyright">&copy; 2024 <a href="https://37signals.com" target="_blank" rel="noopener">37signals</a></p>
+  <p class="footer__copyright">&copy; 2025 <a href="https://37signals.com" target="_blank" rel="noopener">37signals</a></p>
 </footer>
 
 

handbook/native.html

@@ -165,7 +165,7 @@ <h1>Go Native on iOS &amp; Android</h1>
     <li><span>and</span></li>
     <li><a href="https://hey.com" target="_blank" rel="noopener"><img width="122" height="56" src="/assets/logo-hey.svg" alt="HEY"></a></li>
   </ul>
-  <p class="footer__copyright">&copy; 2024 <a href="https://37signals.com" target="_blank" rel="noopener">37signals</a></p>
+  <p class="footer__copyright">&copy; 2025 <a href="https://37signals.com" target="_blank" rel="noopener">37signals</a></p>
 </footer>
 
 

handbook/page_refreshes.html

@@ -186,7 +186,7 @@ <h2 id="broadcasting-page-refreshes"><a class="anchor" href="#broadcasting-page-
     <li><span>and</span></li>
     <li><a href="https://hey.com" target="_blank" rel="noopener"><img width="122" height="56" src="/assets/logo-hey.svg" alt="HEY"></a></li>
   </ul>
-  <p class="footer__copyright">&copy; 2024 <a href="https://37signals.com" target="_blank" rel="noopener">37signals</a></p>
+  <p class="footer__copyright">&copy; 2025 <a href="https://37signals.com" target="_blank" rel="noopener">37signals</a></p>
 </footer>
 
 

handbook/streams.html

@@ -160,6 +160,7 @@ <h2 id="stream-messages-and-actions"><a class="anchor" href="#stream-messages-an
 <p>A Turbo Stream can integrate with any element in the document that can be
 resolved by an <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id">id</a> attribute or <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors">CSS selector</a> (with the exception of <code>&lt;template&gt;</code> element or <code>&lt;iframe&gt;</code> element content). It is not necessary to change targeted elements into <a href="/handbook/frames"><code>&lt;turbo-frame&gt;</code> elements</a>. If your application utilizes <code>&lt;turbo-frame&gt;</code> elements for the sake of a <code>&lt;turbo-stream&gt;</code> element, change the <code>&lt;turbo-frame&gt;</code> into another <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element">built-in element</a>.</p>
 <p>You can render any number of stream elements in a single stream message from a WebSocket, SSE or in response to a form submission.</p>
+<p>Also, any stream element that’s connected to the page dom will be interpreted, i.e. the stream action will execute and the element be removed from the dom. For example, this can be used to execute stream actions when a page or a frame is loaded.</p>
 <h2 id="actions-with-multiple-targets"><a class="anchor" href="#actions-with-multiple-targets">﹟</a> Actions With Multiple Targets</h2>
 <p>Actions can be applied against multiple targets using the <code>targets</code> attribute with a CSS query selector, instead of the regular <code>target</code> attribute that uses a dom ID reference. Examples:</p>
 <pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>turbo-stream</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>remove<span class="token punctuation">"</span></span> <span class="token attr-name">targets</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>.old_records<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br>  <span class="token comment">&lt;!-- The element with the class "old_records" will be removed.<br>  The contents of this stream element are ignored. --></span><br><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>turbo-stream</span><span class="token punctuation">></span></span><br><br><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>turbo-stream</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>after<span class="token punctuation">"</span></span> <span class="token attr-name">targets</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>input.invalid_field<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">></span></span><br>    <span class="token comment">&lt;!-- The contents of this template will be added after the<br>    all elements that match "inputs.invalid_field". --></span><br>    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span>Incorrect<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span><br>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>turbo-stream</span><span class="token punctuation">></span></span></code></pre>
@@ -218,7 +219,7 @@ <h2 id="integration-with-server-side-frameworks"><a class="anchor" href="#integr
     <li><span>and</span></li>
     <li><a href="https://hey.com" target="_blank" rel="noopener"><img width="122" height="56" src="/assets/logo-hey.svg" alt="HEY"></a></li>
   </ul>
-  <p class="footer__copyright">&copy; 2024 <a href="https://37signals.com" target="_blank" rel="noopener">37signals</a></p>
+  <p class="footer__copyright">&copy; 2025 <a href="https://37signals.com" target="_blank" rel="noopener">37signals</a></p>
 </footer>
 
 

index.html

@@ -198,7 +198,7 @@ <h1 class="landing-intro__text grid__item grid__item--start-2 grid__item--span-1
     <li><span>and</span></li>
     <li><a href="https://hey.com" target="_blank" rel="noopener"><img width="122" height="56" src="/assets/logo-hey.svg" alt="HEY"></a></li>
   </ul>
-  <p class="footer__copyright">&copy; 2024 <a href="https://37signals.com" target="_blank" rel="noopener">37signals</a></p>
+  <p class="footer__copyright">&copy; 2025 <a href="https://37signals.com" target="_blank" rel="noopener">37signals</a></p>
 </footer>
 
 

reference/attributes.html

@@ -198,7 +198,7 @@ <h2 id="meta-tags"><a class="anchor" href="#meta-tags">﹟</a> Meta Tags</h2>
     <li><span>and</span></li>
     <li><a href="https://hey.com" target="_blank" rel="noopener"><img width="122" height="56" src="/assets/logo-hey.svg" alt="HEY"></a></li>
   </ul>
-  <p class="footer__copyright">&copy; 2024 <a href="https://37signals.com" target="_blank" rel="noopener">37signals</a></p>
+  <p class="footer__copyright">&copy; 2025 <a href="https://37signals.com" target="_blank" rel="noopener">37signals</a></p>
 </footer>
 
 

reference/drive.html

@@ -367,7 +367,7 @@ <h2 id="formsubmission"><a class="anchor" href="#formsubmission">﹟</a> <code>F
     <li><span>and</span></li>
     <li><a href="https://hey.com" target="_blank" rel="noopener"><img width="122" height="56" src="/assets/logo-hey.svg" alt="HEY"></a></li>
   </ul>
-  <p class="footer__copyright">&copy; 2024 <a href="https://37signals.com" target="_blank" rel="noopener">37signals</a></p>
+  <p class="footer__copyright">&copy; 2025 <a href="https://37signals.com" target="_blank" rel="noopener">37signals</a></p>
 </footer>
 
 

reference/events.html

@@ -646,7 +646,7 @@ <h3 id="turbo%3Afetch-request-error"><a class="anchor" href="#turbo%3Afetch-requ
     <li><span>and</span></li>
     <li><a href="https://hey.com" target="_blank" rel="noopener"><img width="122" height="56" src="/assets/logo-hey.svg" alt="HEY"></a></li>
   </ul>
-  <p class="footer__copyright">&copy; 2024 <a href="https://37signals.com" target="_blank" rel="noopener">37signals</a></p>
+  <p class="footer__copyright">&copy; 2025 <a href="https://37signals.com" target="_blank" rel="noopener">37signals</a></p>
 </footer>
 
 

reference/frames.html

@@ -268,7 +268,7 @@ <h2 id="functions"><a class="anchor" href="#functions">﹟</a> Functions</h2>
     <li><span>and</span></li>
     <li><a href="https://hey.com" target="_blank" rel="noopener"><img width="122" height="56" src="/assets/logo-hey.svg" alt="HEY"></a></li>
   </ul>
-  <p class="footer__copyright">&copy; 2024 <a href="https://37signals.com" target="_blank" rel="noopener">37signals</a></p>
+  <p class="footer__copyright">&copy; 2025 <a href="https://37signals.com" target="_blank" rel="noopener">37signals</a></p>
 </footer>
 
 

reference/streams.html

@@ -189,6 +189,14 @@ <h2 id="targeting-multiple-elements"><a class="anchor" href="#targeting-multiple
 <h2 id="processing-stream-elements"><a class="anchor" href="#processing-stream-elements">﹟</a> Processing Stream Elements</h2>
 <p>Turbo can connect to any form of stream to receive and process stream actions. A stream source must dispatch <a href="https://developer.mozilla.org/en-US/docs/Web/API/MessageEvent">MessageEvent</a> messages that contain the stream action HTML in the <code>data</code> attribute of that event. It’s then connected by <code>Turbo.session.connectStreamSource(source)</code> and disconnected via <code>Turbo.session.disconnectStreamSource(source)</code>. If you need to process stream actions from different source than something producing <code>MessageEvent</code>s, you can use <code>Turbo.renderStreamMessage(streamActionHTML)</code> to do so.</p>
 <p>A good way to wrap all this together is by using a custom element, like turbo-rails does with <a href="https://github.com/hotwired/turbo-rails/blob/main/app/javascript/turbo/cable_stream_source_element.js">TurboCableStreamSourceElement</a>.</p>
+<h2 id="stream-elements-inside-html"><a class="anchor" href="#stream-elements-inside-html">﹟</a> Stream Elements inside HTML</h2>
+<p>Turbo streams are implemented as <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements">a custom HTML element</a>.
+The element is interpreted as part of the <code>connectedCallback</code> function that the browser calls when the element is
+connected to the page dom.</p>
+<p>This means that any stream elements that are rendered into the dom will be interpreted. After being interpreted, Turbo
+will remove the element from the dom. More specifically, it means that rendering stream actions inside the page or
+frame content HTML will cause them to be executed. This can be used to execute additional sideffects beside the main content
+loading.</p>
 <p><a class="button" href="/reference/events">Next: Events</a></p></section>
 
   <footer class="docs__footer grid__item grid__item--start-4 grid__item--span-8">
@@ -200,7 +208,7 @@ <h2 id="processing-stream-elements"><a class="anchor" href="#processing-stream-e
     <li><span>and</span></li>
     <li><a href="https://hey.com" target="_blank" rel="noopener"><img width="122" height="56" src="/assets/logo-hey.svg" alt="HEY"></a></li>
   </ul>
-  <p class="footer__copyright">&copy; 2024 <a href="https://37signals.com" target="_blank" rel="noopener">37signals</a></p>
+  <p class="footer__copyright">&copy; 2025 <a href="https://37signals.com" target="_blank" rel="noopener">37signals</a></p>
 </footer>