Revert "Remove the need to bind member methods in the connectedCallback (#1081)"

This reverts commit 5f8556b1b2.

src/components/animation/animation.ts

@@ -91,6 +91,8 @@ export default class SlAnimation extends ShoelaceElement {
   connectedCallback() {
     super.connectedCallback();
     this.createAnimation();
+    this.handleAnimationCancel = this.handleAnimationCancel.bind(this);
+    this.handleAnimationFinish = this.handleAnimationFinish.bind(this);
   }
 
   disconnectedCallback() {
@@ -116,17 +118,17 @@ export default class SlAnimation extends ShoelaceElement {
     this.createAnimation();
   }
 
-  private handleAnimationFinish = () => {
+  handleAnimationFinish() {
     this.play = false;
     this.hasStarted = false;
     this.emit('sl-finish');
-  };
+  }
 
-  private handleAnimationCancel = () => {
+  handleAnimationCancel() {
     this.play = false;
     this.hasStarted = false;
     this.emit('sl-cancel');
-  };
+  }
 
   @watch('play')
   handlePlayChange() {

src/components/dialog/dialog.ts

@@ -93,6 +93,7 @@ export default class SlDialog extends ShoelaceElement {
 
   connectedCallback() {
     super.connectedCallback();
+    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
     this.modal = new Modal(this);
   }
 
@@ -154,12 +155,12 @@ export default class SlDialog extends ShoelaceElement {
     document.removeEventListener('keydown', this.handleDocumentKeyDown);
   }
 
-  private handleDocumentKeyDown = (event: KeyboardEvent) => {
+  handleDocumentKeyDown(event: KeyboardEvent) {
     if (this.open && event.key === 'Escape') {
       event.stopPropagation();
       this.requestClose('keyboard');
     }
-  };
+  }
 
   @watch('open', { waitUntilFirstUpdate: true })
   async handleOpenChange() {

src/components/drawer/drawer.ts

@@ -110,6 +110,7 @@ export default class SlDrawer extends ShoelaceElement {
 
   connectedCallback() {
     super.connectedCallback();
+    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
     this.modal = new Modal(this);
   }
 
@@ -174,12 +175,12 @@ export default class SlDrawer extends ShoelaceElement {
     document.removeEventListener('keydown', this.handleDocumentKeyDown);
   }
 
-  private handleDocumentKeyDown = (event: KeyboardEvent) => {
+  handleDocumentKeyDown(event: KeyboardEvent) {
     if (this.open && !this.contained && event.key === 'Escape') {
       event.stopPropagation();
       this.requestClose('keyboard');
     }
-  };
+  }
 
   @watch('open', { waitUntilFirstUpdate: true })
   async handleOpenChange() {

src/components/dropdown/dropdown.ts

@@ -104,6 +104,11 @@ export default class SlDropdown extends ShoelaceElement {
 
   connectedCallback() {
     super.connectedCallback();
+    this.handleMenuItemActivate = this.handleMenuItemActivate.bind(this);
+    this.handlePanelSelect = this.handlePanelSelect.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
+    this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
 
     if (!this.containingElement) {
       this.containingElement = this;
@@ -139,7 +144,7 @@ export default class SlDropdown extends ShoelaceElement {
       | undefined;
   }
 
-  private handleKeyDown = (event: KeyboardEvent) => {
+  handleKeyDown(event: KeyboardEvent) {
     // Close when escape is pressed inside an open dropdown. We need to listen on the panel itself and stop propagation
     // in case any ancestors are also listening for this key.
     if (this.open && event.key === 'Escape') {
@@ -147,9 +152,9 @@ export default class SlDropdown extends ShoelaceElement {
       this.hide();
       this.focusOnTrigger();
     }
-  };
+  }
 
-  private handleDocumentKeyDown = (event: KeyboardEvent) => {
+  handleDocumentKeyDown(event: KeyboardEvent) {
     // Handle tabbing
     if (event.key === 'Tab') {
       // Tabbing within an open menu should close the dropdown and refocus the trigger
@@ -178,22 +183,22 @@ export default class SlDropdown extends ShoelaceElement {
         }
       });
     }
-  };
+  }
 
-  private handleDocumentMouseDown = (event: MouseEvent) => {
+  handleDocumentMouseDown(event: MouseEvent) {
     // Close when clicking outside of the containing element
     const path = event.composedPath();
     if (this.containingElement && !path.includes(this.containingElement)) {
       this.hide();
     }
-  };
+  }
 
-  private handleMenuItemActivate = (event: CustomEvent) => {
+  handleMenuItemActivate(event: CustomEvent) {
     const item = event.target as SlMenuItem;
     scrollIntoView(item, this.panel);
-  };
+  }
 
-  private handlePanelSelect = (event: CustomEvent) => {
+  handlePanelSelect(event: CustomEvent) {
     const target = event.target as HTMLElement;
 
     // Hide the dropdown when a menu item is selected
@@ -201,7 +206,7 @@ export default class SlDropdown extends ShoelaceElement {
       this.hide();
       this.focusOnTrigger();
     }
-  };
+  }
 
   handleTriggerClick() {
     if (this.open) {

src/components/mutation-observer/mutation-observer.ts

@@ -44,6 +44,7 @@ export default class SlMutationObserver extends ShoelaceElement {
 
   connectedCallback() {
     super.connectedCallback();
+    this.handleMutation = this.handleMutation.bind(this);
 
     this.mutationObserver = new MutationObserver(this.handleMutation);
 
@@ -75,11 +76,11 @@ export default class SlMutationObserver extends ShoelaceElement {
     this.startObserver();
   }
 
-  private handleMutation = (mutationList: MutationRecord[]) => {
+  handleMutation(mutationList: MutationRecord[]) {
     this.emit('sl-mutation', {
       detail: { mutationList }
     });
-  };
+  }
 
   startObserver() {
     const observeAttributes = typeof this.attr === 'string' && this.attr.length > 0;

src/components/tooltip/tooltip.ts

@@ -99,6 +99,14 @@ export default class SlTooltip extends ShoelaceElement {
   @property({ type: Boolean }) hoist = false;
 
   connectedCallback() {
+    super.connectedCallback();
+    this.handleBlur = this.handleBlur.bind(this);
+    this.handleClick = this.handleClick.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleMouseOver = this.handleMouseOver.bind(this);
+    this.handleMouseOut = this.handleMouseOut.bind(this);
+
     this.updateComplete.then(() => {
       this.addEventListener('blur', this.handleBlur, true);
       this.addEventListener('focus', this.handleFocus, true);
@@ -162,13 +170,13 @@ export default class SlTooltip extends ShoelaceElement {
     return target as HTMLElement;
   }
 
-  private handleBlur = () => {
+  handleBlur() {
     if (this.hasTrigger('focus')) {
       this.hide();
     }
-  };
+  }
 
-  private handleClick = () => {
+  handleClick() {
     if (this.hasTrigger('click')) {
       if (this.open) {
         this.hide();
@@ -176,37 +184,37 @@ export default class SlTooltip extends ShoelaceElement {
         this.show();
       }
     }
-  };
+  }
 
-  private handleFocus = () => {
+  handleFocus() {
     if (this.hasTrigger('focus')) {
       this.show();
     }
-  };
+  }
 
-  private handleKeyDown = (event: KeyboardEvent) => {
+  handleKeyDown(event: KeyboardEvent) {
     // Pressing escape when the target element has focus should dismiss the tooltip
     if (this.open && event.key === 'Escape') {
       event.stopPropagation();
       this.hide();
     }
-  };
+  }
 
-  private handleMouseOver = () => {
+  handleMouseOver() {
     if (this.hasTrigger('hover')) {
       const delay = parseDuration(getComputedStyle(this).getPropertyValue('--show-delay'));
       clearTimeout(this.hoverTimeout);
       this.hoverTimeout = window.setTimeout(() => this.show(), delay);
     }
-  };
+  }
 
-  private handleMouseOut = () => {
+  handleMouseOut() {
     if (this.hasTrigger('hover')) {
       const delay = parseDuration(getComputedStyle(this).getPropertyValue('--hide-delay'));
       clearTimeout(this.hoverTimeout);
       this.hoverTimeout = window.setTimeout(() => this.hide(), delay);
     }
-  };
+  }
 
   @watch('open', { waitUntilFirstUpdate: true })
   async handleOpenChange() {

src/internal/form.ts

@@ -142,7 +142,7 @@ export class FormSubmitController implements ReactiveController {
     }
   }
 
-  private handleFormData = (event: FormDataEvent) => {
+  handleFormData(event: FormDataEvent) {
     const disabled = this.options.disabled(this.host);
     const name = this.options.name(this.host);
     const value = this.options.value(this.host);
@@ -160,9 +160,9 @@ export class FormSubmitController implements ReactiveController {
         event.formData.append(name, (value as string | number | boolean).toString());
       }
     }
-  };
+  }
 
-  private handleFormSubmit = (event: Event) => {
+  handleFormSubmit(event: Event) {
     const disabled = this.options.disabled(this.host);
     const reportValidity = this.options.reportValidity;
 
@@ -177,17 +177,17 @@ export class FormSubmitController implements ReactiveController {
       event.preventDefault();
       event.stopImmediatePropagation();
     }
-  };
+  }
 
-  private handleFormReset = () => {
+  handleFormReset() {
     this.options.setValue(this.host, this.options.defaultValue(this.host));
     this.setUserInteracted(this.host, false);
-  };
+  }
 
-  private handleUserInput = async () => {
+  async handleUserInput() {
     await this.host.updateComplete;
     this.setUserInteracted(this.host, true);
-  };
+  }
 
   reportFormValidity() {
     //