From ce30c356637d1d005825d5179b6bff5f6649c4f8 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Tue, 21 Jul 2020 15:18:58 -0400
Subject: [PATCH] Move bindings from constructor to connectedCallback

---
 src/components/alert/alert.tsx               | 10 ++---
 src/components/avatar/avatar.tsx             |  8 ++--
 src/components/button/button.tsx             | 12 ++---
 src/components/checkbox/checkbox.tsx         | 14 +++---
 src/components/color-picker/color-picker.tsx | 46 ++++++++++----------
 src/components/details/details.tsx           | 13 +++---
 src/components/dialog/dialog.tsx             | 16 +++----
 src/components/drawer/drawer.tsx             | 16 +++----
 src/components/dropdown/dropdown.tsx         | 16 +++----
 src/components/form/form.tsx                 |  8 ++--
 src/components/input/input.tsx               | 20 ++++-----
 src/components/menu/menu.tsx                 | 18 ++++----
 src/components/radio/radio.tsx               | 16 +++----
 src/components/range/range.tsx               | 12 ++---
 src/components/rating/rating.tsx             | 16 +++----
 src/components/select/select.tsx             | 24 +++++-----
 src/components/switch/switch.tsx             | 16 +++----
 src/components/tab-group/tab-group.tsx       | 10 ++---
 src/components/tag/tag.tsx                   |  8 ++--
 src/components/textarea/textarea.tsx         | 14 +++---
 src/components/tooltip/tooltip.tsx           | 18 ++++----
 21 files changed, 165 insertions(+), 166 deletions(-)

diff --git a/src/components/alert/alert.tsx b/src/components/alert/alert.tsx
index 5b7559ad..90acfa4b 100644
--- a/src/components/alert/alert.tsx
+++ b/src/components/alert/alert.tsx
@@ -21,11 +21,6 @@ import { focusVisible } from '../../utilities/focus-visible';
   shadow: true
 })
 export class Tab {
-  constructor() {
-    this.handleCloseClick = this.handleCloseClick.bind(this);
-    this.handleTransitionEnd = this.handleTransitionEnd.bind(this);
-  }
-
   alert: HTMLElement;
 
   @Element() host: HTMLSlAlertElement;
@@ -56,6 +51,11 @@ export class Tab {
   /** Emitted after the alert closes and all transitions are complete. */
   @Event() slAfterHide: EventEmitter;
 
+  connectedCallback() {
+    this.handleCloseClick = this.handleCloseClick.bind(this);
+    this.handleTransitionEnd = this.handleTransitionEnd.bind(this);
+  }
+
   componentDidLoad() {
     focusVisible.observe(this.alert);
 
diff --git a/src/components/avatar/avatar.tsx b/src/components/avatar/avatar.tsx
index 7d07d2ae..ba746480 100644
--- a/src/components/avatar/avatar.tsx
+++ b/src/components/avatar/avatar.tsx
@@ -18,10 +18,6 @@ import { Component, Prop, State, h } from '@stencil/core';
   shadow: true
 })
 export class Avatar {
-  constructor() {
-    this.handleImageError = this.handleImageError.bind(this);
-  }
-
   @State() hasError = false;
 
   /** The image source to use for the avatar. */
@@ -36,6 +32,10 @@ export class Avatar {
   /** Initials to use as a fallback when no image is available (1-2 characters max recommended). */
   @Prop() shape: 'circle' | 'square' | 'rounded' = 'circle';
 
+  connectedCallback() {
+    this.handleImageError = this.handleImageError.bind(this);
+  }
+
   handleImageError() {
     this.hasError = true;
   }
diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
index 336ec9d4..a36384cf 100644
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
@@ -21,12 +21,6 @@ import { Component, Event, EventEmitter, Method, Prop, State, h } from '@stencil
   shadow: true
 })
 export class Button {
-  constructor() {
-    this.handleBlur = this.handleBlur.bind(this);
-    this.handleFocus = this.handleFocus.bind(this);
-    this.handleClick = this.handleClick.bind(this);
-  }
-
   button: HTMLButtonElement;
 
   @State() hasFocus = false;
@@ -67,6 +61,12 @@ export class Button {
   /** Emitted when the button gains focus. */
   @Event() slFocus: EventEmitter;
 
+  connectedCallback() {
+    this.handleBlur = this.handleBlur.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+    this.handleClick = this.handleClick.bind(this);
+  }
+
   /** Sets focus on the button. */
   @Method()
   async setFocus() {
diff --git a/src/components/checkbox/checkbox.tsx b/src/components/checkbox/checkbox.tsx
index eed8236f..b142ae90 100644
--- a/src/components/checkbox/checkbox.tsx
+++ b/src/components/checkbox/checkbox.tsx
@@ -21,13 +21,6 @@ let id = 0;
   shadow: true
 })
 export class Checkbox {
-  constructor() {
-    this.handleClick = this.handleClick.bind(this);
-    this.handleBlur = this.handleBlur.bind(this);
-    this.handleFocus = this.handleFocus.bind(this);
-    this.handleMouseDown = this.handleMouseDown.bind(this);
-  }
-
   inputId = `checkbox-${++id}`;
   labelId = `checkbox-label-${id}`;
   input: HTMLInputElement;
@@ -66,6 +59,13 @@ export class Checkbox {
     this.slChange.emit();
   }
 
+  connectedCallback() {
+    this.handleClick = this.handleClick.bind(this);
+    this.handleBlur = this.handleBlur.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+    this.handleMouseDown = this.handleMouseDown.bind(this);
+  }
+
   componentDidLoad() {
     this.input.indeterminate = this.indeterminate;
   }
diff --git a/src/components/color-picker/color-picker.tsx b/src/components/color-picker/color-picker.tsx
index 503201e5..63636dbe 100644
--- a/src/components/color-picker/color-picker.tsx
+++ b/src/components/color-picker/color-picker.tsx
@@ -24,29 +24,6 @@ import { clamp } from '../../utilities/math';
   shadow: true
 })
 export class ColorPicker {
-  constructor() {
-    this.handleAlphaDrag = this.handleAlphaDrag.bind(this);
-    this.handleAlphaInput = this.handleAlphaInput.bind(this);
-    this.handleAlphaKeyDown = this.handleAlphaKeyDown.bind(this);
-    this.handleCopy = this.handleCopy.bind(this);
-    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
-    this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
-    this.handleDrag = this.handleDrag.bind(this);
-    this.handleDropdownAfterHide = this.handleDropdownAfterHide.bind(this);
-    this.handleDropdownAfterShow = this.handleDropdownAfterShow.bind(this);
-    this.handleDropdownHide = this.handleDropdownHide.bind(this);
-    this.handleDropdownShow = this.handleDropdownShow.bind(this);
-    this.handleGridDrag = this.handleGridDrag.bind(this);
-    this.handleGridKeyDown = this.handleGridKeyDown.bind(this);
-    this.handleHueDrag = this.handleHueDrag.bind(this);
-    this.handleHueInput = this.handleHueInput.bind(this);
-    this.handleHueKeyDown = this.handleHueKeyDown.bind(this);
-    this.handleLightnessInput = this.handleLightnessInput.bind(this);
-    this.handleSaturationInput = this.handleSaturationInput.bind(this);
-    this.handleTextInputChange = this.handleTextInputChange.bind(this);
-    this.handleTextInputKeyDown = this.handleTextInputKeyDown.bind(this);
-  }
-
   bypassValueParse = false;
   copyButton: HTMLSlButtonElement;
   dropdown: HTMLSlDropdownElement;
@@ -149,6 +126,29 @@ export class ColorPicker {
     }
   }
 
+  connectedCallback() {
+    this.handleAlphaDrag = this.handleAlphaDrag.bind(this);
+    this.handleAlphaInput = this.handleAlphaInput.bind(this);
+    this.handleAlphaKeyDown = this.handleAlphaKeyDown.bind(this);
+    this.handleCopy = this.handleCopy.bind(this);
+    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
+    this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
+    this.handleDrag = this.handleDrag.bind(this);
+    this.handleDropdownAfterHide = this.handleDropdownAfterHide.bind(this);
+    this.handleDropdownAfterShow = this.handleDropdownAfterShow.bind(this);
+    this.handleDropdownHide = this.handleDropdownHide.bind(this);
+    this.handleDropdownShow = this.handleDropdownShow.bind(this);
+    this.handleGridDrag = this.handleGridDrag.bind(this);
+    this.handleGridKeyDown = this.handleGridKeyDown.bind(this);
+    this.handleHueDrag = this.handleHueDrag.bind(this);
+    this.handleHueInput = this.handleHueInput.bind(this);
+    this.handleHueKeyDown = this.handleHueKeyDown.bind(this);
+    this.handleLightnessInput = this.handleLightnessInput.bind(this);
+    this.handleSaturationInput = this.handleSaturationInput.bind(this);
+    this.handleTextInputChange = this.handleTextInputChange.bind(this);
+    this.handleTextInputKeyDown = this.handleTextInputKeyDown.bind(this);
+  }
+
   componentWillLoad() {
     if (!this.setColor(this.value)) {
       this.setColor(`#ffff`);
diff --git a/src/components/details/details.tsx b/src/components/details/details.tsx
index 381f66b4..4b0afa02 100644
--- a/src/components/details/details.tsx
+++ b/src/components/details/details.tsx
@@ -22,13 +22,6 @@ let id = 0;
   shadow: true
 })
 export class Details {
-  constructor() {
-    this.handleBodyTransitionEnd = this.handleBodyTransitionEnd.bind(this);
-
-    this.handleSummaryClick = this.handleSummaryClick.bind(this);
-    this.handleSummaryKeyDown = this.handleSummaryKeyDown.bind(this);
-  }
-
   details: HTMLElement;
   header: HTMLElement;
   id = `details-${++id}`;
@@ -60,6 +53,12 @@ export class Details {
   /** Emitted after the details closes and all transitions are complete. */
   @Event() slAfterHide: EventEmitter;
 
+  connectedCallback() {
+    this.handleBodyTransitionEnd = this.handleBodyTransitionEnd.bind(this);
+    this.handleSummaryClick = this.handleSummaryClick.bind(this);
+    this.handleSummaryKeyDown = this.handleSummaryKeyDown.bind(this);
+  }
+
   componentDidLoad() {
     focusVisible.observe(this.details);
 
diff --git a/src/components/dialog/dialog.tsx b/src/components/dialog/dialog.tsx
index 1b93c2dd..6364deea 100644
--- a/src/components/dialog/dialog.tsx
+++ b/src/components/dialog/dialog.tsx
@@ -27,14 +27,6 @@ let id = 0;
   shadow: true
 })
 export class Dialog {
-  constructor() {
-    this.handleDocumentFocusIn = this.handleDocumentFocusIn.bind(this);
-    this.handleCloseClick = this.handleCloseClick.bind(this);
-    this.handleTransitionEnd = this.handleTransitionEnd.bind(this);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-    this.handleOverlayClick = this.handleOverlayClick.bind(this);
-  }
-
   panel: HTMLElement;
   dialog: HTMLElement;
   id = `dialog-${++id}`;
@@ -79,6 +71,14 @@ export class Dialog {
   /** Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the dialog from closing. */
   @Event() slOverlayDismiss: EventEmitter;
 
+  connectedCallback() {
+    this.handleDocumentFocusIn = this.handleDocumentFocusIn.bind(this);
+    this.handleCloseClick = this.handleCloseClick.bind(this);
+    this.handleTransitionEnd = this.handleTransitionEnd.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleOverlayClick = this.handleOverlayClick.bind(this);
+  }
+
   componentDidLoad() {
     focusVisible.observe(this.dialog);
 
diff --git a/src/components/drawer/drawer.tsx b/src/components/drawer/drawer.tsx
index 7394d7da..7fbd6e11 100644
--- a/src/components/drawer/drawer.tsx
+++ b/src/components/drawer/drawer.tsx
@@ -26,14 +26,6 @@ let id = 0;
   shadow: true
 })
 export class Drawer {
-  constructor() {
-    this.handleCloseClick = this.handleCloseClick.bind(this);
-    this.handleTransitionEnd = this.handleTransitionEnd.bind(this);
-    this.handleDocumentFocusIn = this.handleDocumentFocusIn.bind(this);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-    this.handleOverlayClick = this.handleOverlayClick.bind(this);
-  }
-
   panel: HTMLElement;
   drawer: HTMLElement;
   id = `drawer-${++id}`;
@@ -87,6 +79,14 @@ export class Drawer {
   /** Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the dialog from closing. */
   @Event() slOverlayDismiss: EventEmitter;
 
+  connectedCallback() {
+    this.handleCloseClick = this.handleCloseClick.bind(this);
+    this.handleTransitionEnd = this.handleTransitionEnd.bind(this);
+    this.handleDocumentFocusIn = this.handleDocumentFocusIn.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleOverlayClick = this.handleOverlayClick.bind(this);
+  }
+
   componentDidLoad() {
     focusVisible.observe(this.drawer);
 
diff --git a/src/components/dropdown/dropdown.tsx b/src/components/dropdown/dropdown.tsx
index 012a1398..32e2b599 100644
--- a/src/components/dropdown/dropdown.tsx
+++ b/src/components/dropdown/dropdown.tsx
@@ -21,14 +21,6 @@ let id = 0;
   shadow: true
 })
 export class Dropdown {
-  constructor() {
-    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
-    this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
-    this.handlePanelSelect = this.handlePanelSelect.bind(this);
-    this.handleTriggerKeyDown = this.handleTriggerKeyDown.bind(this);
-    this.togglePanel = this.togglePanel.bind(this);
-  }
-
   id = `dropdown-${++id}`;
   ignoreMouseEvents = false;
   ignoreMouseTimeout: any;
@@ -98,6 +90,14 @@ export class Dropdown {
     this.popover.setOptions({ placement: this.placement });
   }
 
+  connectedCallback() {
+    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
+    this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
+    this.handlePanelSelect = this.handlePanelSelect.bind(this);
+    this.handleTriggerKeyDown = this.handleTriggerKeyDown.bind(this);
+    this.togglePanel = this.togglePanel.bind(this);
+  }
+
   componentDidLoad() {
     this.popover = new Popover(this.trigger, this.panel, {
       placement: this.placement,
diff --git a/src/components/form/form.tsx b/src/components/form/form.tsx
index 1874b0be..90b0375d 100644
--- a/src/components/form/form.tsx
+++ b/src/components/form/form.tsx
@@ -25,7 +25,10 @@ export class Form {
   form: HTMLElement;
   formControls: FormControl[];
 
-  constructor() {
+  /** Emitted when the form is submitted. */
+  @Event() slSubmit: EventEmitter;
+
+  connectedCallback() {
     this.formControls = [
       {
         tag: 'button',
@@ -163,9 +166,6 @@ export class Form {
     this.handleKeyDown = this.handleKeyDown.bind(this);
   }
 
-  /** Emitted when the form is submitted. */
-  @Event() slSubmit: EventEmitter;
-
   /** Serializes all form controls elements and returns a `FormData` object. */
   @Method()
   async getFormData() {
diff --git a/src/components/input/input.tsx b/src/components/input/input.tsx
index c29d1866..c751336f 100644
--- a/src/components/input/input.tsx
+++ b/src/components/input/input.tsx
@@ -30,16 +30,6 @@ let id = 0;
   shadow: true
 })
 export class Input {
-  constructor() {
-    this.handleChange = this.handleChange.bind(this);
-    this.handleInput = this.handleInput.bind(this);
-    this.handleBlur = this.handleBlur.bind(this);
-    this.handleFocus = this.handleFocus.bind(this);
-    this.handleClearClick = this.handleClearClick.bind(this);
-    this.handleMouseDown = this.handleMouseDown.bind(this);
-    this.handlePasswordToggle = this.handlePasswordToggle.bind(this);
-  }
-
   inputId = `input-${++id}`;
   labelId = `input-label-${id}`;
   helpTextId = `input-help-text-${id}`;
@@ -137,6 +127,16 @@ export class Input {
   /** Emitted when the control loses focus. */
   @Event() slBlur: EventEmitter;
 
+  connectedCallback() {
+    this.handleChange = this.handleChange.bind(this);
+    this.handleInput = this.handleInput.bind(this);
+    this.handleBlur = this.handleBlur.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+    this.handleClearClick = this.handleClearClick.bind(this);
+    this.handleMouseDown = this.handleMouseDown.bind(this);
+    this.handlePasswordToggle = this.handlePasswordToggle.bind(this);
+  }
+
   /** Sets focus on the input. */
   @Method()
   async setFocus() {
diff --git a/src/components/menu/menu.tsx b/src/components/menu/menu.tsx
index 198d3d27..5513763c 100644
--- a/src/components/menu/menu.tsx
+++ b/src/components/menu/menu.tsx
@@ -17,15 +17,6 @@ import { getTextContent } from '../../utilities/slot';
   shadow: true
 })
 export class Menu {
-  constructor() {
-    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);
-  }
-
   ignoreMouseEvents = false;
   ignoreMouseTimeout: any;
   menu: HTMLElement;
@@ -41,6 +32,15 @@ export class Menu {
   /** Emitted when a menu item is selected. */
   @Event() slSelect: EventEmitter;
 
+  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);
+  }
+
   /** Sets focus on the menu. */
   @Method()
   async setFocus() {
diff --git a/src/components/radio/radio.tsx b/src/components/radio/radio.tsx
index 0609c1bc..89de2bc5 100644
--- a/src/components/radio/radio.tsx
+++ b/src/components/radio/radio.tsx
@@ -20,14 +20,6 @@ let id = 0;
   shadow: true
 })
 export class Radio {
-  constructor() {
-    this.handleClick = this.handleClick.bind(this);
-    this.handleBlur = this.handleBlur.bind(this);
-    this.handleFocus = this.handleFocus.bind(this);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-    this.handleMouseDown = this.handleMouseDown.bind(this);
-  }
-
   inputId = `radio-${++id}`;
   labelId = `radio-label-${id}`;
   input: HTMLInputElement;
@@ -66,6 +58,14 @@ export class Radio {
   /** Emitted when the control gains focus. */
   @Event() slFocus: EventEmitter;
 
+  connectedCallback() {
+    this.handleClick = this.handleClick.bind(this);
+    this.handleBlur = this.handleBlur.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleMouseDown = this.handleMouseDown.bind(this);
+  }
+
   /** Sets focus on the radio. */
   @Method()
   async setFocus() {
diff --git a/src/components/range/range.tsx b/src/components/range/range.tsx
index 0ee82e9b..d5a8fd82 100644
--- a/src/components/range/range.tsx
+++ b/src/components/range/range.tsx
@@ -16,12 +16,6 @@ import ResizeObserver from 'resize-observer-polyfill';
   shadow: true
 })
 export class Range {
-  constructor() {
-    this.handleInput = this.handleInput.bind(this);
-    this.handleBlur = this.handleBlur.bind(this);
-    this.handleFocus = this.handleFocus.bind(this);
-  }
-
   input: HTMLInputElement;
   output: HTMLElement;
   resizeObserver: any;
@@ -61,6 +55,12 @@ export class Range {
   /** Emitted when the control gains focus. */
   @Event() slFocus: EventEmitter;
 
+  connectedCallback() {
+    this.handleInput = this.handleInput.bind(this);
+    this.handleBlur = this.handleBlur.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+  }
+
   componentWillLoad() {
     if (this.value === undefined || this.value === null) this.value = this.min;
     if (this.value < this.min) this.value = this.min;
diff --git a/src/components/rating/rating.tsx b/src/components/rating/rating.tsx
index 753c6b63..7ec9a952 100644
--- a/src/components/rating/rating.tsx
+++ b/src/components/rating/rating.tsx
@@ -15,14 +15,6 @@ import { clamp } from '../../utilities/math';
   shadow: true
 })
 export class Rating {
-  constructor() {
-    this.handleClick = this.handleClick.bind(this);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-    this.handleMouseEnter = this.handleMouseEnter.bind(this);
-    this.handleMouseLeave = this.handleMouseLeave.bind(this);
-    this.handleMouseMove = this.handleMouseMove.bind(this);
-  }
-
   rating: HTMLElement;
 
   @Element() host: HTMLSlRatingElement;
@@ -58,6 +50,14 @@ export class Rating {
   /** Emitted when the rating's value changes. */
   @Event() slChange: EventEmitter;
 
+  connectedCallback() {
+    this.handleClick = this.handleClick.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleMouseEnter = this.handleMouseEnter.bind(this);
+    this.handleMouseLeave = this.handleMouseLeave.bind(this);
+    this.handleMouseMove = this.handleMouseMove.bind(this);
+  }
+
   /** Sets focus on the rating. */
   @Method()
   async setFocus() {
diff --git a/src/components/select/select.tsx b/src/components/select/select.tsx
index 436fc27e..6cbd5f3f 100644
--- a/src/components/select/select.tsx
+++ b/src/components/select/select.tsx
@@ -24,18 +24,6 @@ let id = 0;
   shadow: true
 })
 export class Select {
-  constructor() {
-    this.handleBlur = this.handleBlur.bind(this);
-    this.handleFocus = this.handleFocus.bind(this);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-    this.handleLabelClick = this.handleLabelClick.bind(this);
-    this.handleMenuKeyDown = this.handleMenuKeyDown.bind(this);
-    this.handleMenuHide = this.handleMenuHide.bind(this);
-    this.handleMenuShow = this.handleMenuShow.bind(this);
-    this.handleMenuSelect = this.handleMenuSelect.bind(this);
-    this.handleSlotChange = this.handleSlotChange.bind(this);
-  }
-
   dropdown: HTMLSlDropdownElement;
   input: HTMLSlInputElement;
   inputId = `select-${++id}`;
@@ -111,6 +99,18 @@ export class Select {
   /** Emitted when the control loses focus */
   @Event() slBlur: EventEmitter;
 
+  connectedCallback() {
+    this.handleBlur = this.handleBlur.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleLabelClick = this.handleLabelClick.bind(this);
+    this.handleMenuKeyDown = this.handleMenuKeyDown.bind(this);
+    this.handleMenuHide = this.handleMenuHide.bind(this);
+    this.handleMenuShow = this.handleMenuShow.bind(this);
+    this.handleMenuSelect = this.handleMenuSelect.bind(this);
+    this.handleSlotChange = this.handleSlotChange.bind(this);
+  }
+
   componentDidLoad() {
     this.menu.querySelector('slot').addEventListener('slotchange', this.handleSlotChange);
     this.resizeObserver = new ResizeObserver(() => this.resizeMenu());
diff --git a/src/components/switch/switch.tsx b/src/components/switch/switch.tsx
index 27ee7f88..fc2d91c4 100644
--- a/src/components/switch/switch.tsx
+++ b/src/components/switch/switch.tsx
@@ -20,14 +20,6 @@ let id = 0;
   shadow: true
 })
 export class Switch {
-  constructor() {
-    this.handleClick = this.handleClick.bind(this);
-    this.handleBlur = this.handleBlur.bind(this);
-    this.handleFocus = this.handleFocus.bind(this);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-    this.handleMouseDown = this.handleMouseDown.bind(this);
-  }
-
   switchId = `switch-${++id}`;
   labelId = `switch-label-${id}`;
   input: HTMLInputElement;
@@ -61,6 +53,14 @@ export class Switch {
   /** Emitted when the control gains focus. */
   @Event() slFocus: EventEmitter;
 
+  connectedCallback() {
+    this.handleClick = this.handleClick.bind(this);
+    this.handleBlur = this.handleBlur.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleMouseDown = this.handleMouseDown.bind(this);
+  }
+
   /** Sets focus on the switch. */
   @Method()
   async setFocus() {
diff --git a/src/components/tab-group/tab-group.tsx b/src/components/tab-group/tab-group.tsx
index 204aab33..f6a65222 100644
--- a/src/components/tab-group/tab-group.tsx
+++ b/src/components/tab-group/tab-group.tsx
@@ -23,11 +23,6 @@ import { focusVisible } from '../../utilities/focus-visible';
   shadow: true
 })
 export class TabGroup {
-  constructor() {
-    this.handleClick = this.handleClick.bind(this);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-  }
-
   activeTab: HTMLSlTabElement;
   activeTabIndicator: HTMLElement;
   body: HTMLElement;
@@ -52,6 +47,11 @@ export class TabGroup {
   /** Emitted when a tab is hidden. */
   @Event() slTabHide: EventEmitter;
 
+  connectedCallback() {
+    this.handleClick = this.handleClick.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+  }
+
   componentDidLoad() {
     // Set initial tab state
     this.setAriaLabels();
diff --git a/src/components/tag/tag.tsx b/src/components/tag/tag.tsx
index 091c03ee..bd69e15a 100644
--- a/src/components/tag/tag.tsx
+++ b/src/components/tag/tag.tsx
@@ -17,10 +17,6 @@ import { Component, Event, EventEmitter, Prop, h } from '@stencil/core';
   shadow: true
 })
 export class Tag {
-  constructor() {
-    this.handleClearClick = this.handleClearClick.bind(this);
-  }
-
   tag: HTMLElement;
 
   /** The tag's type. */
@@ -38,6 +34,10 @@ export class Tag {
   /** Emitted when the clear button is activated. */
   @Event() slClear: EventEmitter;
 
+  connectedCallback() {
+    this.handleClearClick = this.handleClearClick.bind(this);
+  }
+
   handleClearClick() {
     this.slClear.emit();
   }
diff --git a/src/components/textarea/textarea.tsx b/src/components/textarea/textarea.tsx
index 9a64f12c..767eb6e4 100644
--- a/src/components/textarea/textarea.tsx
+++ b/src/components/textarea/textarea.tsx
@@ -22,13 +22,6 @@ let id = 0;
   shadow: true
 })
 export class Textarea {
-  constructor() {
-    this.handleChange = this.handleChange.bind(this);
-    this.handleInput = this.handleInput.bind(this);
-    this.handleBlur = this.handleBlur.bind(this);
-    this.handleFocus = this.handleFocus.bind(this);
-  }
-
   textareaId = `textarea-${++id}`;
   labelId = `textarea-label-${id}`;
   helpTextId = `textarea-help-text-${id}`;
@@ -108,6 +101,13 @@ export class Textarea {
     this.setTextareaHeight();
   }
 
+  connectedCallback() {
+    this.handleChange = this.handleChange.bind(this);
+    this.handleInput = this.handleInput.bind(this);
+    this.handleBlur = this.handleBlur.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+  }
+
   componentDidLoad() {
     this.setTextareaHeight();
     this.resizeObserver = new ResizeObserver(() => this.setTextareaHeight());
diff --git a/src/components/tooltip/tooltip.tsx b/src/components/tooltip/tooltip.tsx
index a1d72cf2..0fff62b0 100644
--- a/src/components/tooltip/tooltip.tsx
+++ b/src/components/tooltip/tooltip.tsx
@@ -18,15 +18,6 @@ let id = 0;
   shadow: true
 })
 export class Tooltip {
-  constructor() {
-    this.handleBlur = this.handleBlur.bind(this);
-    this.handleClick = this.handleClick.bind(this);
-    this.handleFocus = this.handleFocus.bind(this);
-    this.handleMouseOver = this.handleMouseOver.bind(this);
-    this.handleMouseOut = this.handleMouseOut.bind(this);
-    this.handleSlotChange = this.handleSlotChange.bind(this);
-  }
-
   id = `tooltip-${++id}`;
   popover: Popover;
   target: HTMLElement;
@@ -91,6 +82,15 @@ export class Tooltip {
   /** Emitted after the tooltip has hidden and all transitions are complete. */
   @Event() slAfterHide: EventEmitter;
 
+  connectedCallback() {
+    this.handleBlur = this.handleBlur.bind(this);
+    this.handleClick = this.handleClick.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+    this.handleMouseOver = this.handleMouseOver.bind(this);
+    this.handleMouseOut = this.handleMouseOut.bind(this);
+    this.handleSlotChange = this.handleSlotChange.bind(this);
+  }
+
   componentDidLoad() {
     const slot = this.host.shadowRoot.querySelector('slot');