chore(components): lazily create root to mount components if needed (#13778)

packages/playwright-ct-react/register.mjs

@@ -53,6 +53,11 @@ function render(component) {
 }
 
 window.playwrightMount = component => {
+  if (!document.getElementById('root')) {
+    const rootElement = document.createElement('div');
+    rootElement.id = 'root';
+    document.body.append(rootElement);
+  }
   ReactDOM.render(render(component), document.getElementById('root'));
   return '#root > *';
 };

packages/playwright-ct-svelte/register.mjs

@@ -26,6 +26,11 @@ export default (components, options) => {
 };
 
 const playwrightMount = component => {
+  if (!document.getElementById('root')) {
+    const rootElement = document.createElement('div');
+    rootElement.id = 'root';
+    document.body.append(rootElement);
+  }
   let componentCtor = registry.get(component.type);
   if (!componentCtor) {
     // Lookup by shorthand.

packages/playwright-ct-vue/register.mjs

@@ -125,6 +125,11 @@ function createDevTools() {
 }
 
 window.playwrightMount = async component => {
+  if (!document.getElementById('root')) {
+    const rootElement = document.createElement('div');
+    rootElement.id = 'root';
+    document.body.append(rootElement);
+  }
   const app = instance.createApp({
     render: () => render(component)
   });