fix(ScopedElements): check if __registry actually exists on the cur…

…rent class, not a parent (#2456)

.changeset/curly-rice-greet.md

@@ -0,0 +1,5 @@
+---
+'@open-wc/scoped-elements': patch
+---
+
+Check if `__registry` actually exists on the current class, not a parent.

packages/scoped-elements/src/ScopedElementsMixin.js

@@ -95,7 +95,18 @@ const ScopedElementsMixinImplementation = superclass =>
         elementStyles,
       } = /** @type {typeof ScopedElementsHost} */ (this.constructor);
 
-      if (!this.registry) {
+      const shouldCreateRegistry =
+        !this.registry ||
+        // @ts-ignore
+        (this.registry === this.constructor.__registry &&
+          !Object.prototype.hasOwnProperty.call(this.constructor, '__registry'));
+
+      /**
+       * Create a new registry if:
+       * - the registry is not defined
+       * - this class doesn't have its own registry *AND* has no shared registry
+       */
+      if (shouldCreateRegistry) {
         this.registry = supportsScopedRegistry ? new CustomElementRegistry() : customElements;
         for (const [tagName, klass] of Object.entries(scopedElements)) {
           this.defineScopedElement(tagName, klass);

packages/scoped-elements/test-web/runScopedElementsMixinSuite.js

@@ -158,6 +158,48 @@ export function runScopedElementsMixinSuite({ label }) {
       expect(el.shadowRoot.children[1]).to.be.an.instanceOf(FeatureLazyB);
     });
 
+    it('supports inheritance with added scoped elements', async () => {
+      class Lorem extends LitElement {}
+      class Ipsum extends LitElement {}
+
+      class Foo extends ScopedElementsMixin(LitElement) {
+        static get scopedElements() {
+          return {
+            'x-lorem': Lorem,
+          };
+        }
+
+        render() {
+          return html`<x-lorem></x-lorem>`;
+        }
+      }
+      class Bar extends Foo {
+        static get scopedElements() {
+          return {
+            ...super.scopedElements,
+            'x-ipsum': Ipsum,
+          };
+        }
+
+        render() {
+          return html`
+            <x-lorem></x-lorem>
+            <x-ipsum></x-ipsum>
+          `;
+        }
+      }
+
+      const foo = defineCE(Foo);
+      const bar = defineCE(Bar);
+
+      const elFoo = await fixture(`<${foo}></${foo}>`);
+      const elBar = await fixture(`<${bar}></${bar}>`);
+
+      expect(elFoo.shadowRoot.children[0]).to.be.an.instanceOf(Lorem);
+      expect(elBar.shadowRoot.children[0]).to.be.an.instanceOf(Lorem);
+      expect(elBar.shadowRoot.children[1]).to.be.an.instanceOf(Ipsum);
+    });
+
     it('should avoid definition if lazy is already defined', async () => {
       class FeatureLazyA extends FeatureA {}
       const tag = defineCE(