fix(@lit-labs/ssr-dom-shim): patch localName and tagName with customE…

…lements.define call

This change extends the CustomElementRegistryShim to patch localName and tagName into the web component, when calling define.
This allows instances to call `this.localName` and `this.tagName` accordingly.

Fixes lit#3375

packages/labs/ssr-dom-shim/src/index.ts

@@ -148,6 +148,17 @@ const CustomElementRegistryShim = class CustomElementRegistry {
         );
       }
     }
+    // Polyfill tagName and localName for the component.
+    Object.defineProperties(ctor.prototype, {
+      localName: {
+        value: name,
+        writable: false,
+      },
+      tagName: {
+        value: name.toUpperCase(),
+        writable: false,
+      },
+    });
     this.__definitions.set(name, {
       ctor,
       // Note it's important we read `observedAttributes` in case it is a getter

packages/labs/ssr-dom-shim/src/test/element-shim_test.ts

@@ -7,7 +7,7 @@
 import {suite} from 'uvu';
 // eslint-disable-next-line import/extensions
 import * as assert from 'uvu/assert';
-import {HTMLElement} from '@lit-labs/ssr-dom-shim';
+import {customElements, HTMLElement} from '@lit-labs/ssr-dom-shim';
 
 const test = suite('Element Shim');
 
@@ -45,4 +45,13 @@ test('setAttribute silently casts values to a string', () => {
   assert.equal(shimmedEl.getAttribute('tomato'), '[object Object]');
 });
 
+test('localName and tagName should be available', () => {
+  const elementName = 'lit-test';
+  customElements.define(elementName, class extends HTMLElement {});
+  const LitTest = customElements.get(elementName)!;
+  const shimmedEl = new LitTest();
+  assert.equal(shimmedEl.localName, elementName);
+  assert.equal(shimmedEl.tagName, elementName.toUpperCase());
+});
+
 test.run();