Reapply active class when slot content changes

Author: scottmcclung

force-app/main/default/lwc/link/link.html

@@ -1,5 +1,5 @@
 <template>
-    <slot onclick={handleClick}>
+    <slot onclick={handleClick} onslotchange={handleSlotChange}>
         <lightning-button variant={variant} label={label} title={title} class="slds-m-left_x-small"></lightning-button>
     </slot>
 </template>

force-app/main/default/lwc/link/link.js

@@ -1,5 +1,6 @@
 import { LightningElement, api, track } from 'lwc';
 import { REGISTER_ROUTER_EVENT_NAME, dispatchEvent, getRouteMatch } from 'c/lwcRouterUtil';
+
 export default class Link extends LightningElement {
     @api label;
     @api to = '*';
@@ -43,9 +44,31 @@ export default class Link extends LightningElement {
             this.active = this.currentPath === this.to;
         })
     }
+    renderedCallback() {
+        this.captureSlottedElement();
+    }
+    disconnectedCallback() {
+        if (this.unsubscribe) {
+            this.unsubscribe.unsubscribe();
+        }
+    }
+    handleClick(e) {
+        e.stopPropagation();
+        if (this.to) {
+            this.routerInstance.currentPath = this.to;
+            this.currentPath = this.to;
+        }
+    }
+    handleSlotChange() {
+        this.captureSlottedElement();
+        this.toggleActiveAttributes();
+    }
     setCurrentPath() {
         this.currentPath = this.routerInstance.currentPath;
     }
+    captureSlottedElement() {
+        this._slottedElement = this.querySelector('*');
+    }
     toggleActiveAttributes() {
         if (this.active) {
             this.setAttribute("active", "");
@@ -63,19 +86,4 @@ export default class Link extends LightningElement {
         if (!element) return;
         this.activeClass.forEach(activeClass => element.classList.remove(activeClass));
     }
-    handleClick(e) {
-        e.stopPropagation();
-        if (this.to) {
-            this.routerInstance.currentPath = this.to;
-            this.currentPath = this.to;
-        }
-    }
-    renderedCallback() {
-        this._slottedElement = this.querySelector('*');
-    }
-    disconnectedCallback() {
-        if (this.unsubscribe) {
-            this.unsubscribe.unsubscribe();
-        }
-    }
 }