[reactive-element] Fix Node build auto-shimming of HTMLElement to respect existing global shim

.changeset/thick-wasps-love.md

@@ -0,0 +1,6 @@
+---
+'@lit/lit-starter-js': patch
+'@lit/lit-starter-ts': patch
+---
+
+Update dependency `@rollup/plugin-replace`

.changeset/tidy-lamps-rest.md

@@ -0,0 +1,6 @@
+---
+'lit': patch
+'@lit/reactive-element': patch
+---
+
+Fix built-in shimming of `HTMLElement` for Node build of `reactive-element` to respect existing `HTMLElement` in global

package.json

@@ -185,7 +185,7 @@
     "@rollup/plugin-commonjs": "^22.0.0",
     "@rollup/plugin-inject": "^5.0.2",
     "@rollup/plugin-node-resolve": "^13.2.1",
-    "@rollup/plugin-replace": "^4.0.0",
+    "@rollup/plugin-replace": "^5.0.2",
     "@rollup/plugin-virtual": "^2.1.0",
     "@types/chai": "^4.3.1",
     "@types/mocha": "^9.1.1",

packages/lit-starter-js/package.json

@@ -48,7 +48,7 @@
     "@custom-elements-manifest/analyzer": "^0.6.3",
     "@open-wc/testing": "^3.1.5",
     "@rollup/plugin-node-resolve": "^13.3.0",
-    "@rollup/plugin-replace": "^4.0.0",
+    "@rollup/plugin-replace": "^5.0.2",
     "@web/dev-server": "^0.1.31",
     "@web/dev-server-legacy": "^1.0.0",
     "@web/test-runner": "^0.13.27",

packages/lit-starter-ts/package.json

@@ -49,7 +49,7 @@
     "@custom-elements-manifest/analyzer": "^0.6.3",
     "@open-wc/testing": "^3.1.5",
     "@rollup/plugin-node-resolve": "^13.3.0",
-    "@rollup/plugin-replace": "^4.0.0",
+    "@rollup/plugin-replace": "^5.0.2",
     "@typescript-eslint/eslint-plugin": "^5.25.0",
     "@typescript-eslint/parser": "^5.25.0",
     "@web/dev-server": "^0.1.31",

packages/reactive-element/package.json

@@ -166,7 +166,9 @@
     "test:dev": "wireit",
     "test:prod": "wireit",
     "test:node": "wireit",
-    "test:node-dev": "wireit"
+    "test:node-dev": "wireit",
+    "test:node-dom-shim": "wireit",
+    "test:node-dom-shim-dev": "wireit"
   },
   "wireit": {
     "build": {
@@ -268,6 +270,8 @@
         "test:prod",
         "test:node",
         "test:node-dev",
+        "test:node-dom-shim",
+        "test:node-dom-shim-dev",
         "check-version"
       ]
     },
@@ -319,6 +323,24 @@
       ],
       "files": [],
       "output": []
+    },
+    "test:node-dom-shim": {
+      "command": "node development/test/node-dom-shim.js",
+      "dependencies": [
+        "build:ts",
+        "build:rollup"
+      ],
+      "files": [],
+      "output": []
+    },
+    "test:node-dom-shim-dev": {
+      "command": "node --conditions=development development/test/node-dom-shim.js",
+      "dependencies": [
+        "build:ts",
+        "build:rollup"
+      ],
+      "files": [],
+      "output": []
     }
   },
   "files": [

packages/reactive-element/src/test/node-dom-shim.ts

@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+// This file will be loaded by Node from the node:test-dom-shim script to verify
+// `ReactiveElement` will prefer extending existing `HTMLElement` from the
+// global rather than the built-in shim
+
+import './node-shim-html-element.js';
+import {ReactiveElement} from '@lit/reactive-element';
+import {HTMLElement} from '@lit-labs/ssr-dom-shim';
+
+import assert from 'node:assert/strict';
+assert.strictEqual(
+  Object.getPrototypeOf(ReactiveElement),
+  globalThis.HTMLElement,
+  'Expected ReactiveElement to extend existing globalThis.HTMLElement'
+);
+assert.notStrictEqual(
+  Object.getPrototypeOf(ReactiveElement),
+  HTMLElement,
+  'Expected ReactiveElement to not extend HTMLElement from ssr-dom-shim'
+);

packages/reactive-element/src/test/node-imports.ts

@@ -43,3 +43,11 @@ export class MyElement extends ReactiveElement {
 
 export class MyOtherElement extends ReactiveElement {}
 customElements.define('my-other-element', MyOtherElement);
+
+import assert from 'node:assert/strict';
+import {HTMLElement} from '@lit-labs/ssr-dom-shim';
+assert.strictEqual(
+  Object.getPrototypeOf(ReactiveElement),
+  HTMLElement,
+  'Expected ReactiveElement to extend HTMLElement from ssr-dom-shim'
+);

packages/reactive-element/src/test/node-shim-html-element.ts

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+// This file is used as a side-effectful import in `node-dom-shim.js` to
+// simulate loading a separate DOM shim that adds `HTMLElement` to the global
+
+class FakeHTMLElement {}
+globalThis.HTMLElement = FakeHTMLElement as typeof HTMLElement;

rollup-common.js

@@ -275,6 +275,7 @@ const injectNodeDomShimIntoReactiveElement = [
     include: ['**/packages/lit-html/development/experimental-hydrate.js'],
   }),
   replace({
+    preventAssignment: true,
     values: {
       'extends HTMLElement': 'extends (globalThis.HTMLElement ?? HTMLElement)',
     },