[labs/ssr-dom-shim] Patch localName and tagName with customElements.d…

…efine call (#4553)

.changeset/lovely-suits-rescue.md

@@ -0,0 +1,5 @@
+---
+'@lit-labs/ssr-dom-shim': patch
+---
+
+Implement Element.localName and Element.tagName. Fixes [3375](https://github.com/lit/lit/issues/3375).

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

@@ -53,6 +53,12 @@ const ElementShim = class Element {
  }
  return this.__shadowRoot;
  }
+ get localName() {
+ return (this.constructor as NamedCustomHTMLElementConstructor).__localName;
+ }
+ get tagName() {
+ return this.localName?.toUpperCase();
+ }
  setAttribute(name: string, value: unknown): void {
  // Emulate browser behavior that silently casts all values to string. E.g.
  // `42` becomes `"42"` and `{}` becomes `"[object Object]""`.
@@ -123,6 +129,11 @@ interface CustomHTMLElementConstructor {
  observedAttributes?: string[];
 }
 
+interface NamedCustomHTMLElementConstructor
+ extends CustomHTMLElementConstructor {
+ __localName: string;
+}
+
 type CustomElementRegistration = {
  ctor: {new (): HTMLElement};
  observedAttributes: string[];
@@ -148,6 +159,8 @@ const CustomElementRegistryShim = class CustomElementRegistry {
  );
  }
  }
+ // Provide tagName and localName for the component.
+ (ctor as NamedCustomHTMLElementConstructor).__localName = name;
  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,32 @@ test('setAttribute silently casts values to a string', () => {
  assert.equal(shimmedEl.getAttribute('tomato'), '[object Object]');
 });
 
+test('localName and tagName should be available with constructor from customElements registry', () => {
+ const elementName = 'lit-test-registry';
+ customElements.define(elementName, class extends HTMLElement {});
+ const LitTestRegistry = customElements.get(elementName)!;
+
+ const shimmedEl = new LitTestRegistry();
+ assert.equal(shimmedEl.localName, elementName);
+ assert.equal(shimmedEl.tagName, elementName.toUpperCase());
+});
+
+test('localName and tagName should be available when registering with customElements', () => {
+ const elementName = 'lit-test-local';
+ class LitTestLocal extends HTMLElement {}
+ customElements.define(elementName, LitTestLocal);
+
+ const shimmedEl = new LitTestLocal();
+ assert.equal(shimmedEl.localName, elementName);
+ assert.equal(shimmedEl.tagName, elementName.toUpperCase());
+});
+
+test('localName and tagName usage should return undefined if not registered', () => {
+ class LitTestUnregistered extends HTMLElement {}
+
+ const shimmedEl = new LitTestUnregistered();
+ assert.equal(shimmedEl.localName, undefined);
+ assert.equal(shimmedEl.tagName, undefined);
+});
+
 test.run();