Allow multiple top-level nodes when rendering StreamField blocks

But keep passing just the first element to the BoundWidget class

client/src/entrypoints/admin/telepath/widgets.js

@@ -76,13 +76,13 @@ class Widget {
     tempContainer.innerHTML = html.trim();
     const dom = tempContainer.firstChild;
 
-    /* replace the placeholder with the new element */
-    placeholder.replaceWith(dom);
+    /* execute any scripts in the new element(s) */
+    runInlineScripts(tempContainer);
 
-    /* execute any scripts in the new element */
-    runInlineScripts(dom);
+    /* replace the placeholder with the new element(s) */
+    placeholder.replaceWith(...tempContainer.childNodes);
 
-    // Add any extra attributes we received to the HTML of the widget
+    // Add any extra attributes we received to the first element of the widget
     if (typeof options?.attributes === 'object') {
       Object.entries(options.attributes).forEach(([key, value]) => {
         dom.setAttribute(key, value);

client/src/entrypoints/admin/telepath/widgets.test.js

@@ -122,6 +122,40 @@ describe('telepath: wagtail.widgets.Widget with inline JS', () => {
   });
 });
 
+describe('telepath: wagtail.widgets.Widget with multiple top-level nodes', () => {
+  let boundWidget;
+  let widgetDef;
+
+  beforeEach(() => {
+    // Create a placeholder to render the widget
+    document.body.innerHTML = '<div id="placeholder"></div>';
+
+    widgetDef = window.telepath.unpack({
+      _type: 'wagtail.widgets.Widget',
+      _args: [
+        '<input type="text" name="__NAME__" maxlength="255" id="__ID__"><button data-button-state="idle">Click me</button><script>document.getElementById("__ID__").className = "custom-class";</script>',
+        '__ID__',
+      ],
+    });
+    boundWidget = widgetDef.render(
+      document.getElementById('placeholder'),
+      'the-name',
+      'the-id',
+      'The Value',
+    );
+  });
+
+  test('it renders correctly', () => {
+    expect(document.body.querySelector('input').outerHTML).toBe(
+      '<input type="text" name="the-name" maxlength="255" id="the-id" class="custom-class">',
+    );
+    expect(document.querySelector('[data-button-state]').outerHTML).toBe(
+      '<button data-button-state="idle">Click me</button>',
+    );
+    expect(document.querySelector('input').value).toBe('The Value');
+  });
+});
+
 describe('telepath: wagtail.widgets.RadioSelect', () => {
   let boundWidget;