From de32cfa43e94276c60f93ac4c560cb7b84534cfe Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Fri, 16 Jul 2021 10:40:06 -0400
Subject: [PATCH] fix: ensure customElements API ssr compatibility

fix #4129
---
 packages/runtime-dom/src/apiCustomElement.ts                | 6 +++++-
 packages/server-renderer/__tests__/render.spec.ts           | 4 ++++
 .../server-renderer/__tests__/ssrAttrFallthrough.spec.ts    | 4 ++++
 packages/server-renderer/__tests__/ssrDirectives.spec.ts    | 4 ++++
 .../server-renderer/__tests__/ssrDynamicComponent.spec.ts   | 4 ++++
 packages/server-renderer/__tests__/ssrInterpolate.spec.ts   | 4 ++++
 packages/server-renderer/__tests__/ssrRenderAttrs.spec.ts   | 4 ++++
 packages/server-renderer/__tests__/ssrRenderList.spec.ts    | 4 ++++
 packages/server-renderer/__tests__/ssrScopeId.spec.ts       | 4 ++++
 packages/server-renderer/__tests__/ssrSuspense.spec.ts      | 4 ++++
 packages/server-renderer/__tests__/ssrTeleport.spec.ts      | 4 ++++
 packages/server-renderer/__tests__/ssrVModelHelpers.spec.ts | 4 ++++
 12 files changed, 49 insertions(+), 1 deletion(-)

diff --git a/packages/runtime-dom/src/apiCustomElement.ts b/packages/runtime-dom/src/apiCustomElement.ts
index dc1f8ed781d..25b46220178 100644
--- a/packages/runtime-dom/src/apiCustomElement.ts
+++ b/packages/runtime-dom/src/apiCustomElement.ts
@@ -157,7 +157,11 @@ export const defineSSRCustomElement = ((options: any) => {
   return defineCustomElement(options, hydrate)
 }) as typeof defineCustomElement
 
-export class VueElement extends HTMLElement {
+const BaseClass = (typeof HTMLElement !== 'undefined'
+  ? HTMLElement
+  : class {}) as typeof HTMLElement
+
+export class VueElement extends BaseClass {
   /**
    * @internal
    */
diff --git a/packages/server-renderer/__tests__/render.spec.ts b/packages/server-renderer/__tests__/render.spec.ts
index b3bb4980542..1a40c598cc7 100644
--- a/packages/server-renderer/__tests__/render.spec.ts
+++ b/packages/server-renderer/__tests__/render.spec.ts
@@ -1,3 +1,7 @@
+/**
+ * @jest-environment node
+ */
+
 import {
   createApp,
   h,
diff --git a/packages/server-renderer/__tests__/ssrAttrFallthrough.spec.ts b/packages/server-renderer/__tests__/ssrAttrFallthrough.spec.ts
index fb974f97923..3cc2efc31e5 100644
--- a/packages/server-renderer/__tests__/ssrAttrFallthrough.spec.ts
+++ b/packages/server-renderer/__tests__/ssrAttrFallthrough.spec.ts
@@ -1,3 +1,7 @@
+/**
+ * @jest-environment node
+ */
+
 import { createApp } from 'vue'
 import { renderToString } from '../src/renderToString'
 
diff --git a/packages/server-renderer/__tests__/ssrDirectives.spec.ts b/packages/server-renderer/__tests__/ssrDirectives.spec.ts
index a3ba59c957d..788ba092500 100644
--- a/packages/server-renderer/__tests__/ssrDirectives.spec.ts
+++ b/packages/server-renderer/__tests__/ssrDirectives.spec.ts
@@ -1,3 +1,7 @@
+/**
+ * @jest-environment node
+ */
+
 import { renderToString } from '../src/renderToString'
 import {
   createApp,
diff --git a/packages/server-renderer/__tests__/ssrDynamicComponent.spec.ts b/packages/server-renderer/__tests__/ssrDynamicComponent.spec.ts
index dff16c781b8..751c229a8b8 100644
--- a/packages/server-renderer/__tests__/ssrDynamicComponent.spec.ts
+++ b/packages/server-renderer/__tests__/ssrDynamicComponent.spec.ts
@@ -1,3 +1,7 @@
+/**
+ * @jest-environment node
+ */
+
 import { createApp, createVNode } from 'vue'
 import { renderToString } from '../src/renderToString'
 
diff --git a/packages/server-renderer/__tests__/ssrInterpolate.spec.ts b/packages/server-renderer/__tests__/ssrInterpolate.spec.ts
index fc9a4a3b40d..d0245558257 100644
--- a/packages/server-renderer/__tests__/ssrInterpolate.spec.ts
+++ b/packages/server-renderer/__tests__/ssrInterpolate.spec.ts
@@ -1,3 +1,7 @@
+/**
+ * @jest-environment node
+ */
+
 import { ssrInterpolate } from '../src/helpers/ssrInterpolate'
 import { escapeHtml } from '@vue/shared'
 
diff --git a/packages/server-renderer/__tests__/ssrRenderAttrs.spec.ts b/packages/server-renderer/__tests__/ssrRenderAttrs.spec.ts
index bf5c2b53e86..270c910d5aa 100644
--- a/packages/server-renderer/__tests__/ssrRenderAttrs.spec.ts
+++ b/packages/server-renderer/__tests__/ssrRenderAttrs.spec.ts
@@ -1,3 +1,7 @@
+/**
+ * @jest-environment node
+ */
+
 import {
   ssrRenderAttrs,
   ssrRenderClass,
diff --git a/packages/server-renderer/__tests__/ssrRenderList.spec.ts b/packages/server-renderer/__tests__/ssrRenderList.spec.ts
index 59b5d2ddf27..744d87886e0 100644
--- a/packages/server-renderer/__tests__/ssrRenderList.spec.ts
+++ b/packages/server-renderer/__tests__/ssrRenderList.spec.ts
@@ -1,3 +1,7 @@
+/**
+ * @jest-environment node
+ */
+
 import { ssrRenderList } from '../src/helpers/ssrRenderList'
 
 describe('ssr: renderList', () => {
diff --git a/packages/server-renderer/__tests__/ssrScopeId.spec.ts b/packages/server-renderer/__tests__/ssrScopeId.spec.ts
index 3091153e1e6..e49c4d3b784 100644
--- a/packages/server-renderer/__tests__/ssrScopeId.spec.ts
+++ b/packages/server-renderer/__tests__/ssrScopeId.spec.ts
@@ -1,3 +1,7 @@
+/**
+ * @jest-environment node
+ */
+
 import { createApp, h, mergeProps, withCtx } from 'vue'
 import { renderToString } from '../src/renderToString'
 import { ssrRenderComponent, ssrRenderAttrs, ssrRenderSlot } from '../src'
diff --git a/packages/server-renderer/__tests__/ssrSuspense.spec.ts b/packages/server-renderer/__tests__/ssrSuspense.spec.ts
index 4da4ce4b97d..dec810221e8 100644
--- a/packages/server-renderer/__tests__/ssrSuspense.spec.ts
+++ b/packages/server-renderer/__tests__/ssrSuspense.spec.ts
@@ -1,3 +1,7 @@
+/**
+ * @jest-environment node
+ */
+
 import { createApp, h, Suspense } from 'vue'
 import { renderToString } from '../src/renderToString'
 
diff --git a/packages/server-renderer/__tests__/ssrTeleport.spec.ts b/packages/server-renderer/__tests__/ssrTeleport.spec.ts
index 1dd4aa65a63..fda95918615 100644
--- a/packages/server-renderer/__tests__/ssrTeleport.spec.ts
+++ b/packages/server-renderer/__tests__/ssrTeleport.spec.ts
@@ -1,3 +1,7 @@
+/**
+ * @jest-environment node
+ */
+
 import { createApp, h, Teleport } from 'vue'
 import { renderToString } from '../src/renderToString'
 import { SSRContext } from '../src/render'
diff --git a/packages/server-renderer/__tests__/ssrVModelHelpers.spec.ts b/packages/server-renderer/__tests__/ssrVModelHelpers.spec.ts
index d003c54064f..4958612a4c0 100644
--- a/packages/server-renderer/__tests__/ssrVModelHelpers.spec.ts
+++ b/packages/server-renderer/__tests__/ssrVModelHelpers.spec.ts
@@ -1,3 +1,7 @@
+/**
+ * @jest-environment node
+ */
+
 import {
   ssrRenderDynamicModel,
   ssrGetDynamicModelProps