Render <turbo-cable-stream-source> as display: none

app/assets/javascripts/turbo.js

@@ -4943,7 +4943,18 @@ function walk(obj) {
   }), {});
 }
 
+const template = Object.assign(document.createElement("template"), {
+  innerHTML: "<style>:host { display: none; }</style>"
+});
+
 class TurboCableStreamSourceElement extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({
+      mode: "open"
+    });
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
   async connectedCallback() {
     connectStreamSource(this);
     this.subscription = await subscribeTo(this.channel, {

app/javascript/turbo/cable_stream_source_element.js

@@ -2,7 +2,18 @@ import { connectStreamSource, disconnectStreamSource } from "@hotwired/turbo"
 import { subscribeTo } from "./cable"
 import snakeize from "./snakeize"
 
+const template = Object.assign(document.createElement("template"), {
+  innerHTML: "<style>:host { display: none; }</style>"
+})
+
 class TurboCableStreamSourceElement extends HTMLElement {
+  constructor() {
+    super()
+
+    this.attachShadow({ mode: "open" })
+    this.shadowRoot.appendChild(template.content.cloneNode(true))
+  }
+
   async connectedCallback() {
     connectStreamSource(this)
     this.subscription = await subscribeTo(this.channel, {

test/system/broadcasts_test.rb

@@ -121,7 +121,7 @@ class BroadcastsTest < ApplicationSystemTestCase
   private
 
   def wait_for_stream_to_be_connected
-    assert_selector "turbo-cable-stream-source[connected]", visible: false
+    assert_selector "turbo-cable-stream-source[connected]", visible: false, style: { display: "none" }
   end
 
   def assert_broadcasts_text(text, to:, &block)