From 4b6f53461db979f9fc8355780ee0c2e378e64e03 Mon Sep 17 00:00:00 2001
From: Andrey Lushnikov <aslushnikov@gmail.com>
Date: Tue, 3 May 2022 17:11:45 -0600
Subject: [PATCH] chore(components): lazily create root to mount components if
 needed (#13778)

---
 packages/playwright-ct-react/register.mjs  | 5 +++++
 packages/playwright-ct-svelte/register.mjs | 5 +++++
 packages/playwright-ct-vue/register.mjs    | 5 +++++
 3 files changed, 15 insertions(+)

diff --git a/packages/playwright-ct-react/register.mjs b/packages/playwright-ct-react/register.mjs
index 3c1721e33b..1b2f479105 100644
--- a/packages/playwright-ct-react/register.mjs
+++ b/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 > *';
 };
diff --git a/packages/playwright-ct-svelte/register.mjs b/packages/playwright-ct-svelte/register.mjs
index 358849e332..66f663249f 100644
--- a/packages/playwright-ct-svelte/register.mjs
+++ b/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.
diff --git a/packages/playwright-ct-vue/register.mjs b/packages/playwright-ct-vue/register.mjs
index e4856df8e4..f999d14976 100644
--- a/packages/playwright-ct-vue/register.mjs
+++ b/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)
   });