[WIP] Fix/allow destructuring for scopedElements

packages/scoped-elements/html-element.js

@@ -1,7 +1,8 @@
 import { dedupeMixin } from '@open-wc/dedupe-mixin';
+// eslint-disable-next-line no-unused-vars, import/no-unresolved
+import { ScopedElementsHost } from './types.js';
 
 /**
- * @typedef {import('./types.js').ScopedElementsHost} ScopedElementsHost
  * @typedef {import('./types.js').ScopedElementsMap} ScopedElementsMap
  */
 
@@ -14,11 +15,10 @@ if (!versions.includes(version)) {
 /**
  * @template {import('./types.js').Constructor<HTMLElement>} T
  * @param {T} superclass
- * @return {T & import('./types.js').Constructor<ScopedElementsHost>}
+ * @return {T & import('./types.js').Constructor<ScopedElementsHost> & typeof ScopedElementsHost}
  */
 const ScopedElementsMixinImplementation = superclass =>
-  /** @type {ScopedElementsHost} */
-  class ScopedElementsHost extends superclass {
+  class ScopedElementsHostImplementation extends superclass {
     /**
      * Obtains the scoped elements definitions map if specified.
      *
@@ -39,7 +39,7 @@ const ScopedElementsMixinImplementation = superclass =>
      * @returns {CustomElementRegistry=}
      */
     get registry() {
-      return /** @type {typeof ScopedElementsHost} */ (this.constructor).__registry;
+      return /** @type {typeof ScopedElementsHostImplementation} */ (this.constructor).__registry;
     }
 
     /**
@@ -48,7 +48,8 @@ const ScopedElementsMixinImplementation = superclass =>
      * @param {CustomElementRegistry} registry
      */
     set registry(registry) {
-      /** @type {typeof ScopedElementsHost} */ (this.constructor).__registry = registry;
+      /** @type {typeof ScopedElementsHostImplementation} */ (this.constructor).__registry =
+        registry;
     }
 
     /**

packages/scoped-elements/lit-element.js

@@ -1,9 +1,10 @@
 import { dedupeMixin } from '@open-wc/dedupe-mixin';
 import { adoptStyles } from 'lit';
 import { ScopedElementsMixin as BaseScopedElementsMixin } from './html-element.js';
+// eslint-disable-next-line no-unused-vars, import/no-unresolved
+import { ScopedElementsHost } from './types.js';
 
 /**
- * @typedef {import('./types.js').ScopedElementsHost} ScopedElementsHost
  * @typedef {import('./types.js').ScopedElementsMap} ScopedElementsMap
  * @typedef {import('lit').CSSResultOrNative} CSSResultOrNative
  * @typedef {import('lit').LitElement} LitElement
@@ -15,11 +16,10 @@ import { ScopedElementsMixin as BaseScopedElementsMixin } from './html-element.j
 /**
  * @template {LitElementConstructor} T
  * @param {T} superclass
- * @return {T & ScopedElementsHostConstructor}
+ * @return {T & ScopedElementsHostConstructor & typeof ScopedElementsHost}
  */
 const ScopedElementsMixinImplementation = superclass =>
-  /** @type {ScopedElementsHost} */
-  class ScopedElementsHost extends BaseScopedElementsMixin(superclass) {
+  class ScopedElementsHostImplementation extends BaseScopedElementsMixin(superclass) {
     createRenderRoot() {
       const { shadowRootOptions, elementStyles } = /** @type {TypeofLitElement} */ (
         this.constructor

packages/scoped-elements/test-web/components/vanilla/FeatureA-copy.js

@@ -0,0 +1,32 @@
+import { LitElement } from 'lit';
+import { ScopedElementsMixin } from '../../../lit-element.js';
+import { MyButton1 } from './MyButton1.js';
+
+export class FeatureA0 extends LitElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.shadowRoot.innerHTML = '<button></button>';
+  }
+}
+
+export class FeatureA extends ScopedElementsMixin(FeatureA0) {
+  static scopedElements = {
+    // Note this line does not generate errors anymore
+    ...super.scopedElements,
+    'my-button': MyButton1,
+  };
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  connectedCallback() {
+    this.shadowRoot.innerHTML = '<my-button></my-button>';
+  }
+}

packages/scoped-elements/types.ts

@@ -10,12 +10,14 @@ export declare class ScopedElementsHost {
   /**
    * Obtains the scoped elements definitions map
    */
-  static scopedElements: ScopedElementsMap;
+  static scopedElements: ScopedElementsMap | undefined;
 
   /**
    * Obtains the CustomElementRegistry
    */
   registry?: CustomElementRegistry;
+
+  constructor(...args: any[]);
 }
 
 declare global {

packages/testing-helpers/src/scopedElementsWrapper.js

@@ -70,7 +70,7 @@ const getWrapperUniqueName = (counter = 0) => {
  *
  * @param {import('./renderable.js').LitHTMLRenderable} template
  * @param {ScopedElementsMap} scopedElements
- * @return {HTMLElement}
+ * @return {ScopedElementsTestWrapper}
  */
 export function getScopedElementsTemplate(template, scopedElements) {
   const wrapperTagName = getWrapperUniqueName();