Add support for "private" custom elements (#1943)

dfreedm · web-flow · commit 39ad574e2a38 · 2021-06-09T10:37:46.000-07:00
In typescript, users can specify a private constructor to prevent
subclassing

```ts
class XFoo extends HTMLElement {
  private constructor() {
    super();
  }
}
```

In order to support this construction with `@customElement`, we have to
switch from using `Constructor&lt;HTMLElement&gt;` to `Omit&lt;typeof
  HTMLElement, 'new'&gt;`.
diff --git a/packages/reactive-element/src/decorators/custom-element.ts b/packages/reactive-element/src/decorators/custom-element.ts
@@ -12,11 +12,13 @@
  */
 import {Constructor, ClassDescriptor} from './base.js';
 
-const legacyCustomElement = (
-  tagName: string,
-  clazz: Constructor<HTMLElement>
-) => {
-  window.customElements.define(tagName, clazz);
+/**
+ * Allow for custom element classes with private constructors
+ */
+type CustomElementClass = Omit<typeof HTMLElement, 'new'>;
+
+const legacyCustomElement = (tagName: string, clazz: CustomElementClass) => {
+  window.customElements.define(tagName, clazz as CustomElementConstructor);
   // Cast as any because TS doesn't recognize the return type as being a
   // subtype of the decorated class when clazz is typed as
   // `Constructor<HTMLElement>` for some reason.
@@ -57,7 +59,7 @@ const standardCustomElement = (
  */
 export const customElement =
   (tagName: string) =>
-  (classOrDescriptor: Constructor<HTMLElement> | ClassDescriptor) =>
+  (classOrDescriptor: CustomElementClass | ClassDescriptor) =>
     typeof classOrDescriptor === 'function'
       ? legacyCustomElement(tagName, classOrDescriptor)
-      : standardCustomElement(tagName, classOrDescriptor);
+      : standardCustomElement(tagName, classOrDescriptor as ClassDescriptor);
diff --git a/packages/reactive-element/src/test/decorators/customElement_test.ts b/packages/reactive-element/src/test/decorators/customElement_test.ts
@@ -16,4 +16,15 @@ suite('@customElement', () => {
     const DefinedC = customElements.get(tagName);
     assert.strictEqual(DefinedC, C0);
   });
+  test('elements with private constructors can be defined', () => {
+    const tagName = generateElementName();
+    @customElement(tagName)
+    class C1 extends HTMLElement {
+      private constructor() {
+        super();
+      }
+    }
+    const DefinedC = customElements.get(tagName);
+    assert.strictEqual(DefinedC, C1);
+  });
 });
