refactor: replace string selectors with HTMLElements for single-spa mount

The mount function was using a string selector to mount the Vue instance.
In order to add the possibility to mount inside a ShadowDom, we cannot
use string selectors. So we replace the logic to be based on HTMLElements.

Author: Lukinoh

src/single-spa-vue.js

@@ -88,14 +88,17 @@ function mount(opts, mountedInstances, props) {
           }
         } else {
           domEl = appOptions.el;
+          if (!domEl.parentNode) {
+            throw Error(
+              `If appOptions.el is provided to single-spa-vue, the dom element must exist in the dom. Was provided as ${appOptions.el.outerHTML}`
+            );
+          }
           if (!domEl.id) {
             domEl.id = `single-spa-application:${props.name}`;
           }
-          appOptions.el = `#${CSS.escape(domEl.id)}`;
         }
       } else {
         const htmlId = `single-spa-application:${props.name}`;
-        appOptions.el = `#${CSS.escape(htmlId)}`;
         domEl = document.getElementById(htmlId);
         if (!domEl) {
           domEl = document.createElement("div");
@@ -104,10 +107,6 @@ function mount(opts, mountedInstances, props) {
         }
       }
 
-      if (!opts.replaceMode) {
-        appOptions.el = appOptions.el + " .single-spa-container";
-      }
-
       // single-spa-vue@>=2 always REPLACES the `el` instead of appending to it.
       // We want domEl to stick around and not be replaced. So we tell Vue to mount
       // into a container div inside of the main domEl
@@ -119,6 +118,12 @@ function mount(opts, mountedInstances, props) {
 
       instance.domEl = domEl;
 
+      if (!opts.replaceMode) {
+        domEl = domEl.querySelector(".single-spa-container");
+      }
+
+      appOptions.el = domEl;
+
       if (!appOptions.render && !appOptions.template && opts.rootComponent) {
         appOptions.render = (h) => h(opts.rootComponent);
       }

src/single-spa-vue.test.js

@@ -3,6 +3,13 @@ import singleSpaVue from "./single-spa-vue";
 const domElId = `single-spa-application:test-app`;
 const cssSelector = `#single-spa-application\\:test-app`;
 
+const singleSpaContainerDiv = document.createElement("div");
+singleSpaContainerDiv.className = "single-spa-container";
+
+const singleSpaApplicationDiv = document.createElement("div");
+singleSpaApplicationDiv.id = domElId;
+singleSpaApplicationDiv.append(singleSpaContainerDiv);
+
 describe("single-spa-vue", () => {
   let Vue, props, $destroy;
 
@@ -122,9 +129,7 @@ describe("single-spa-vue", () => {
       .then(() => lifecycles.mount(props))
       .then(() => {
         expect(Vue).toHaveBeenCalled();
-        expect(Vue.mock.calls[0][0].el).toBe(
-          "#my-custom-el-2 .single-spa-container"
-        );
+        expect(Vue.mock.calls[0][0].el).toEqual(singleSpaContainerDiv);
         expect(Vue.mock.calls[0][0].data()).toEqual({
           name: "test-app",
         });
@@ -155,9 +160,7 @@ describe("single-spa-vue", () => {
       .bootstrap(props)
       .then(() => lifecycles.mount(props))
       .then(() => {
-        expect(Vue.mock.calls[0][0].el).toBe(
-          `#${htmlId} .single-spa-container`
-        );
+        expect(Vue.mock.calls[0][0].el).toEqual(singleSpaContainerDiv);
         expect(Vue.mock.calls[0][0].data()).toEqual({
           name: "test-app",
         });
@@ -182,7 +185,7 @@ describe("single-spa-vue", () => {
     }).toThrow(/must be a string CSS selector/);
   });
 
-  it(`throws an error if appOptions.el doesn't exist in the dom`, () => {
+  it(`throws an error if appOptions.el as string selector doesn't exist in the dom`, () => {
     const lifecycles = new singleSpaVue({
       Vue,
       appOptions: {
@@ -201,6 +204,26 @@ describe("single-spa-vue", () => {
       });
   });
 
+  it(`throws an error if appOptions.el as HTMLElement doesn't exist in the dom`, () => {
+    const doesntExistInDom = document.createElement("div");
+    const lifecycles = new singleSpaVue({
+      Vue,
+      appOptions: {
+        el: doesntExistInDom,
+      },
+    });
+
+    return lifecycles
+      .bootstrap(props)
+      .then(() => lifecycles.mount(props))
+      .then(() => {
+        fail("should throw validation error");
+      })
+      .catch((err) => {
+        expect(err.message).toMatch("the dom element must exist in the dom");
+      });
+  });
+
   it(`reuses the default dom element container on the second mount`, () => {
     const lifecycles = new singleSpaVue({
       Vue,
@@ -363,9 +386,7 @@ describe("single-spa-vue", () => {
       .then(() => lifecycles.mount(props))
       .then(() => {
         expect(Vue).toHaveBeenCalled();
-        expect(Vue.mock.calls[0][0].el).toBe(
-          cssSelector + " .single-spa-container"
-        );
+        expect(Vue.mock.calls[0][0].el).toEqual(singleSpaContainerDiv);
         return lifecycles.unmount(props);
       });
   });
@@ -598,7 +619,9 @@ describe("single-spa-vue", () => {
     return lifecycles
       .bootstrap(props)
       .then(() => lifecycles.mount(props))
-      .then(() => expect(Vue.mock.calls[0][0].el).toBe(`#${htmlId}`))
+      .then(() =>
+        expect(Vue.mock.calls[0][0].el).toEqual(singleSpaApplicationDiv)
+      )
       .then(() => {
         expect(document.querySelector(`#${htmlId}`)).toBeTruthy();
         domEl.remove();
@@ -622,7 +645,7 @@ describe("single-spa-vue", () => {
       .bootstrap(props)
       .then(() => lifecycles.mount(props))
       .then(() =>
-        expect(Vue.mock.calls[0][0].el).toBe(`#${htmlId} .single-spa-container`)
+        expect(Vue.mock.calls[0][0].el).toEqual(singleSpaContainerDiv)
       )
       .then(() => {
         expect(
@@ -631,4 +654,36 @@ describe("single-spa-vue", () => {
         domEl.remove();
       });
   });
+
+  it(`mounts into a shadow dom`, () => {
+    const domEl = document.createElement("div");
+    domEl.attachShadow({ mode: "open" });
+
+    const shadowMount = document.createElement("div");
+    domEl.shadowRoot.append(shadowMount);
+
+    const htmlId = CSS.escape("single-spa-application:test-app");
+
+    document.body.appendChild(domEl);
+
+    const lifecycles = new singleSpaVue({
+      Vue,
+      appOptions: {
+        el: shadowMount,
+      },
+    });
+
+    return lifecycles
+      .bootstrap(props)
+      .then(() => lifecycles.mount(props))
+      .then(() =>
+        expect(Vue.mock.calls[0][0].el).toEqual(singleSpaContainerDiv)
+      )
+      .then(() => {
+        expect(
+          domEl.shadowRoot.querySelector(`#${htmlId} .single-spa-container`)
+        ).toBeTruthy();
+        domEl.remove();
+      });
+  });
 });