fix: add children with id to id map even if their parent was teleported (#8321)

Author: vursen

packages/component-base/src/polylit-mixin.js

@@ -224,8 +224,10 @@ const PolylitMixinImplementation = (superclass) => {
         this.$ = {};
       }
 
-      this.renderRoot.querySelectorAll('[id]').forEach((node) => {
-        this.$[node.id] = node;
+      [...Object.values(this.$), this.renderRoot].forEach((node) => {
+        node.querySelectorAll('[id]').forEach((node) => {
+          this.$[node.id] = node;
+        });
       });
     }
 

packages/component-base/test/polylit-mixin.test.js

@@ -1196,7 +1196,7 @@ describe('PolylitMixin', () => {
           }
 
           render() {
-            return html`Teleported`;
+            return html`<slot></slot>`;
           }
         },
       );
@@ -1206,7 +1206,10 @@ describe('PolylitMixin', () => {
           render() {
             return html`
               <div id="title">Title</div>
-              <${unsafeStatic(teleportedTag)} id="teleported" />
+
+              <${unsafeStatic(teleportedTag)} id="teleported">
+                <div id="teleportedContent">Teleported content</div>
+              </${unsafeStatic(teleportedTag)}>
             `;
           }
         },
@@ -1223,12 +1226,17 @@ describe('PolylitMixin', () => {
 
       it('should register elements with id', () => {
         expect(element.$.title).to.be.instanceOf(HTMLDivElement);
-        expect(element.$.title.id).to.equal('title');
+        expect(element.$.title.textContent.trim()).to.equal('Title');
       });
 
       it('should register teleported elements with id', () => {
         expect(element.$.teleported).to.be.instanceOf(HTMLElement);
-        expect(element.$.teleported.id).to.equal('teleported');
+        expect(element.$.teleported.textContent.trim()).to.equal('Teleported content');
+      });
+
+      it('should register children with id whose parent was teleported', () => {
+        expect(element.$.teleportedContent).to.be.instanceOf(HTMLElement);
+        expect(element.$.teleportedContent.textContent.trim()).to.equal('Teleported content');
       });
     });