diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
index 7945bf6f34b..20763a2c1a0 100644
--- a/packages/calcite-components/src/components.d.ts
+++ b/packages/calcite-components/src/components.d.ts
@@ -5255,7 +5255,7 @@ export namespace Components {
     }
     interface CalciteTileGroup {
         /**
-          * Specifies the alignment of each Tile's content.
+          * Specifies the alignment of each `calcite-tile`'s content.
          */
         "alignment": Exclude<Alignment, "end">;
         /**
@@ -13155,7 +13155,7 @@ declare namespace LocalJSX {
     }
     interface CalciteTileGroup {
         /**
-          * Specifies the alignment of each Tile's content.
+          * Specifies the alignment of each `calcite-tile`'s content.
          */
         "alignment"?: Exclude<Alignment, "end">;
         /**
diff --git a/packages/calcite-components/src/components/accordion/accordion.tsx b/packages/calcite-components/src/components/accordion/accordion.tsx
index 8fb506ca557..0c1ccebdff1 100644
--- a/packages/calcite-components/src/components/accordion/accordion.tsx
+++ b/packages/calcite-components/src/components/accordion/accordion.tsx
@@ -10,7 +10,6 @@ import {
   Watch,
 } from "@stencil/core";
 import { Appearance, Position, Scale, SelectionMode } from "../interfaces";
-import { createObserver } from "../../utils/observers";
 import { RequestedItem } from "./interfaces";
 /**
  * @slot - A slot for adding `calcite-accordion-item`s. `calcite-accordion` cannot be nested, however `calcite-accordion-item`s can.
@@ -58,7 +57,7 @@ export class Accordion {
   @Watch("scale")
   @Watch("selectionMode")
   handlePropsChange(): void {
-    this.updateAccordionItems();
+    this.updateItems();
   }
 
   //--------------------------------------------------------------------------
@@ -78,15 +77,6 @@ export class Accordion {
   //
   //--------------------------------------------------------------------------
 
-  connectedCallback(): void {
-    this.mutationObserver?.observe(this.el, { childList: true });
-    this.updateAccordionItems();
-  }
-
-  disconnectedCallback(): void {
-    this.mutationObserver?.disconnect();
-  }
-
   render(): VNode {
     const transparent = this.appearance === "transparent";
     return (
@@ -96,7 +86,7 @@ export class Accordion {
           accordion: !transparent,
         }}
       >
-        <slot />
+        <slot onSlotchange={this.handleSlotChange} />
       </div>
     );
   }
@@ -123,15 +113,13 @@ export class Accordion {
 
   @Element() el: HTMLCalciteAccordionElement;
 
-  mutationObserver = createObserver("mutation", () => this.updateAccordionItems());
-
   //--------------------------------------------------------------------------
   //
   //  Private Methods
   //
   //--------------------------------------------------------------------------
 
-  private updateAccordionItems(): void {
+  private updateItems(): void {
     this.el.querySelectorAll("calcite-accordion-item").forEach((item) => {
       item.iconPosition = this.iconPosition;
       item.iconType = this.iconType;
@@ -141,4 +129,6 @@ export class Accordion {
     // sync props on items across shadow DOM
     document.dispatchEvent(new CustomEvent("calciteInternalAccordionItemsSync"));
   }
+
+  private handleSlotChange = (): void => this.updateItems();
 }
diff --git a/packages/calcite-components/src/components/action/action.tsx b/packages/calcite-components/src/components/action/action.tsx
index 64e3169ffcd..f5e4711c5f1 100644
--- a/packages/calcite-components/src/components/action/action.tsx
+++ b/packages/calcite-components/src/components/action/action.tsx
@@ -27,7 +27,6 @@ import {
   setUpLoadableComponent,
 } from "../../utils/loadable";
 import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
-import { createObserver } from "../../utils/observers";
 import { getIconScale } from "../../utils/component";
 import {
   connectMessages,
@@ -147,8 +146,6 @@ export class Action
 
   buttonEl: HTMLButtonElement;
 
-  mutationObserver = createObserver("mutation", () => forceUpdate(this));
-
   @State() effectiveLocale = "";
 
   @Watch("effectiveLocale")
@@ -174,7 +171,6 @@ export class Action
     connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
-    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
   }
 
   async componentWillLoad(): Promise<void> {
@@ -192,7 +188,6 @@ export class Action
     disconnectInteractive(this);
     disconnectLocalized(this);
     disconnectMessages(this);
-    this.mutationObserver?.disconnect();
   }
 
   componentDidRender(): void {
@@ -272,16 +267,16 @@ export class Action
           [CSS.slotContainerHidden]: loading,
         }}
       >
-        <slot />
+        <slot onSlotchange={this.handleSlotChange} />
       </div>
     );
 
-    return hasIconToDisplay ? (
-      <div aria-hidden="true" class={CSS.iconContainer} key="icon-container">
+    return (
+      <div class={CSS.iconContainer} hidden={!hasIconToDisplay} key="icon-container">
         {iconNode}
         {slotContainerNode}
       </div>
-    ) : null;
+    );
   }
 
   render(): VNode {
@@ -354,4 +349,6 @@ export class Action
       tooltip.referenceElement = this.buttonEl;
     }
   };
+
+  private handleSlotChange = (): void => forceUpdate(this);
 }
diff --git a/packages/calcite-components/src/components/button/button.tsx b/packages/calcite-components/src/components/button/button.tsx
index 5eb13e520d0..625847f0b61 100644
--- a/packages/calcite-components/src/components/button/button.tsx
+++ b/packages/calcite-components/src/components/button/button.tsx
@@ -36,7 +36,7 @@ import {
   updateMessages,
 } from "../../utils/t9n";
 import { Appearance, FlipContext, Kind, Scale, Width } from "../interfaces";
-import { toAriaBoolean } from "../../utils/dom";
+import { slotChangeHasContent, toAriaBoolean } from "../../utils/dom";
 import { ButtonMessages } from "./assets/button/t9n";
 import { ButtonAlignment } from "./interfaces";
 import { CSS } from "./resources";
@@ -208,13 +208,11 @@ export class Button
     connectLocalized(this);
     connectMessages(this);
     this.hasLoader = this.loading;
-    this.setupTextContentObserver();
     connectLabel(this);
     this.formEl = findAssociatedForm(this);
   }
 
   disconnectedCallback(): void {
-    this.mutationObserver?.disconnect();
     disconnectInteractive(this);
     disconnectLabel(this);
     disconnectLocalized(this);
@@ -226,7 +224,6 @@ export class Button
   async componentWillLoad(): Promise<void> {
     setUpLoadableComponent(this);
     if (Build.isBrowser) {
-      this.updateHasContent();
       await setUpMessages(this);
     }
   }
@@ -274,8 +271,11 @@ export class Button
     );
 
     const contentEl = (
-      <span class={CSS.content} ref={(el) => (this.contentEl = el)}>
-        <slot />
+      <span
+        class={CSS.content}
+        ref={(el) => (this.contentEl = el)}
+      >
+        <slot onSlotchange={this.handleSlotChange} />
       </span>
     );
 
@@ -342,9 +342,6 @@ export class Button
 
   labelEl: HTMLCalciteLabelElement;
 
-  /** watches for changing text content */
-  private mutationObserver = createObserver("mutation", () => this.updateHasContent());
-
   /** the rendered child element */
   private childEl?: HTMLElement;
 
@@ -363,18 +360,6 @@ export class Button
 
   @State() defaultMessages: ButtonMessages;
 
-  private updateHasContent() {
-    const slottedContent = this.el.textContent.trim().length > 0 || this.el.childNodes.length > 0;
-    this.hasContent =
-      this.el.childNodes.length === 1 && this.el.childNodes[0]?.nodeName === "#text"
-        ? this.el.textContent?.trim().length > 0
-        : slottedContent;
-  }
-
-  private setupTextContentObserver() {
-    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
-  }
-
   /** keeps track of the tooltipText */
   @State() tooltipText: string;
 
@@ -425,4 +410,8 @@ export class Button
       this.resizeObserver?.observe(el);
     }
   };
+
+  private handleSlotChange = (event: Event): void => {
+    this.hasContent = slotChangeHasContent(event);
+  };
 }
diff --git a/packages/calcite-components/src/components/dropdown-group/dropdown-group.tsx b/packages/calcite-components/src/components/dropdown-group/dropdown-group.tsx
index 527cee969ac..4f034f9c7fb 100644
--- a/packages/calcite-components/src/components/dropdown-group/dropdown-group.tsx
+++ b/packages/calcite-components/src/components/dropdown-group/dropdown-group.tsx
@@ -11,7 +11,6 @@ import {
   Watch,
 } from "@stencil/core";
 import { Scale, SelectionMode } from "../interfaces";
-import { createObserver } from "../../utils/observers";
 import { CSS } from "../dropdown-item/resources";
 import { RequestedItem } from "./interfaces";
 
@@ -76,19 +75,10 @@ export class DropdownGroup {
   //
   //--------------------------------------------------------------------------
 
-  connectedCallback(): void {
-    this.updateItems();
-    this.mutationObserver?.observe(this.el, { childList: true });
-  }
-
   componentWillLoad(): void {
     this.groupPosition = this.getGroupPosition();
   }
 
-  disconnectedCallback(): void {
-    this.mutationObserver?.disconnect();
-  }
-
   render(): VNode {
     const groupTitle = this.groupTitle ? (
       <span aria-hidden="true" class="dropdown-title">
@@ -109,7 +99,7 @@ export class DropdownGroup {
         >
           {dropdownSeparator}
           {groupTitle}
-          <slot />
+          <slot onSlotchange={this.handleSlotChange} />
         </div>
       </Host>
     );
@@ -148,24 +138,24 @@ export class DropdownGroup {
   /** the requested item */
   private requestedDropdownItem: HTMLCalciteDropdownItemElement;
 
-  private updateItems = (): void => {
-    Array.from(this.el.querySelectorAll("calcite-dropdown-item")).forEach(
-      (item) => (item.selectionMode = this.selectionMode),
-    );
-  };
-
-  mutationObserver = createObserver("mutation", () => this.updateItems());
-
   //--------------------------------------------------------------------------
   //
   //  Private Methods
   //
   //--------------------------------------------------------------------------
 
+  private updateItems = (): void => {
+    Array.from(this.el.querySelectorAll("calcite-dropdown-item")).forEach(
+      (item) => (item.selectionMode = this.selectionMode),
+    );
+  };
+
   private getGroupPosition(): number {
     return Array.prototype.indexOf.call(
       this.el.parentElement.querySelectorAll("calcite-dropdown-group"),
       this.el,
     );
   }
+
+  private handleSlotChange = (): void => this.updateItems();
 }
diff --git a/packages/calcite-components/src/components/flow/flow.tsx b/packages/calcite-components/src/components/flow/flow.tsx
index b1b70417a90..4c145a8784d 100755
--- a/packages/calcite-components/src/components/flow/flow.tsx
+++ b/packages/calcite-components/src/components/flow/flow.tsx
@@ -1,5 +1,4 @@
 import { Component, Element, h, Listen, Method, Prop, State, VNode } from "@stencil/core";
-import { createObserver } from "../../utils/observers";
 import {
   componentFocusable,
   LoadableComponent,
@@ -93,19 +92,12 @@ export class Flow implements LoadableComponent {
 
   @State() items: FlowItemLikeElement[] = [];
 
-  itemMutationObserver = createObserver("mutation", () => this.updateFlowProps());
-
   // --------------------------------------------------------------------------
   //
   //  Lifecycle
   //
   // --------------------------------------------------------------------------
 
-  connectedCallback(): void {
-    this.itemMutationObserver?.observe(this.el, { childList: true, subtree: true });
-    this.updateFlowProps();
-  }
-
   async componentWillLoad(): Promise<void> {
     setUpLoadableComponent(this);
   }
@@ -114,10 +106,6 @@ export class Flow implements LoadableComponent {
     setComponentLoaded(this);
   }
 
-  disconnectedCallback(): void {
-    this.itemMutationObserver?.disconnect();
-  }
-
   // --------------------------------------------------------------------------
   //
   //  Private Methods
@@ -179,6 +167,8 @@ export class Flow implements LoadableComponent {
     }
   };
 
+  private handleSlotChange = (): void => this.updateFlowProps();
+
   // --------------------------------------------------------------------------
   //
   //  Render Methods
@@ -196,7 +186,7 @@ export class Flow implements LoadableComponent {
 
     return (
       <div class={frameDirectionClasses}>
-        <slot />
+        <slot onSlotchange={this.handleSlotChange} />
       </div>
     );
   }
diff --git a/packages/calcite-components/src/components/inline-editable/inline-editable.tsx b/packages/calcite-components/src/components/inline-editable/inline-editable.tsx
index cf6168e4e79..e9b457e5eba 100644
--- a/packages/calcite-components/src/components/inline-editable/inline-editable.tsx
+++ b/packages/calcite-components/src/components/inline-editable/inline-editable.tsx
@@ -27,7 +27,6 @@ import {
   setUpLoadableComponent,
 } from "../../utils/loadable";
 import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
-import { createObserver } from "../../utils/observers";
 import {
   connectMessages,
   disconnectMessages,
@@ -133,8 +132,6 @@ export class InlineEditable
     connectLabel(this);
     connectLocalized(this);
     connectMessages(this);
-    this.mutationObserver?.observe(this.el, { childList: true });
-    this.mutationObserverCallback();
   }
 
   async componentWillLoad(): Promise<void> {
@@ -151,7 +148,6 @@ export class InlineEditable
     disconnectLabel(this);
     disconnectLocalized(this);
     disconnectMessages(this);
-    this.mutationObserver?.disconnect();
   }
 
   componentDidRender(): void {
@@ -167,7 +163,7 @@ export class InlineEditable
           onKeyDown={this.escapeKeyHandler}
         >
           <div class={CSS.inputWrapper}>
-            <slot />
+            <slot onSlotchange={this.handleSlotChange} />
           </div>
           <div class={CSS.controlsWrapper}>
             <calcite-button
@@ -278,8 +274,6 @@ export class InlineEditable
 
   labelEl: HTMLCalciteLabelElement;
 
-  mutationObserver = createObserver("mutation", () => this.mutationObserverCallback());
-
   @State() defaultMessages: InlineEditableMessages;
 
   @State() effectiveLocale: string;
@@ -309,11 +303,6 @@ export class InlineEditable
   //
   //--------------------------------------------------------------------------
 
-  mutationObserverCallback(): void {
-    this.updateSlottedInput();
-    this.scale = this.scale || this.inputElement?.scale;
-  }
-
   onLabelClick(): void {
     this.setFocus();
   }
@@ -324,6 +313,7 @@ export class InlineEditable
     });
 
     this.inputElement = inputElement;
+    this.scale = this.scale || inputElement?.scale;
 
     if (!inputElement) {
       return;
@@ -417,4 +407,6 @@ export class InlineEditable
       this.loading = false;
     }
   };
+
+  private handleSlotChange = (): void => this.updateSlottedInput();
 }
diff --git a/packages/calcite-components/src/components/input-number/input-number.tsx b/packages/calcite-components/src/components/input-number/input-number.tsx
index 9236de95f10..ae26ebaef16 100644
--- a/packages/calcite-components/src/components/input-number/input-number.tsx
+++ b/packages/calcite-components/src/components/input-number/input-number.tsx
@@ -57,7 +57,6 @@ import {
   parseNumberString,
   sanitizeNumberString,
 } from "../../utils/number";
-import { createObserver } from "../../utils/observers";
 import { CSS_UTILITY } from "../../utils/resources";
 import {
   connectMessages,
@@ -426,8 +425,6 @@ export class InputNumber
 
   private nudgeNumberValueIntervalId: number;
 
-  mutationObserver = createObserver("mutation", () => this.setDisabledAction());
-
   private userChangedValue = false;
 
   //--------------------------------------------------------------------------
@@ -470,8 +467,6 @@ export class InputNumber
     }
     connectLabel(this);
     connectForm(this);
-
-    this.mutationObserver?.observe(this.el, { childList: true });
     this.setDisabledAction();
     this.el.addEventListener(internalHiddenInputInputEvent, this.onHiddenFormInputInput);
   }
@@ -487,7 +482,6 @@ export class InputNumber
     disconnectLocalized(this);
     disconnectMessages(this);
 
-    this.mutationObserver?.disconnect();
     this.el.removeEventListener(internalHiddenInputInputEvent, this.onHiddenFormInputInput);
   }
 
@@ -992,6 +986,8 @@ export class InputNumber
     }
   }
 
+  private handleSlotChange = (): void => this.setDisabledAction();
+
   // --------------------------------------------------------------------------
   //
   //  Render Methods
@@ -1119,7 +1115,7 @@ export class InputNumber
               {this.loading ? loader : null}
             </div>
             <div class={CSS.actionWrapper}>
-              <slot name={SLOTS.action} />
+              <slot name={SLOTS.action} onSlotchange={this.handleSlotChange} />
             </div>
             {this.numberButtonType === "vertical" && !this.readOnly ? numberButtonsVertical : null}
             {this.suffixText ? suffixText : null}
diff --git a/packages/calcite-components/src/components/input-text/input-text.tsx b/packages/calcite-components/src/components/input-text/input-text.tsx
index b565cff9f1d..8c3869a1603 100644
--- a/packages/calcite-components/src/components/input-text/input-text.tsx
+++ b/packages/calcite-components/src/components/input-text/input-text.tsx
@@ -37,7 +37,6 @@ import {
   setUpLoadableComponent,
 } from "../../utils/loadable";
 import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
-import { createObserver } from "../../utils/observers";
 import { CSS_UTILITY } from "../../utils/resources";
 import {
   connectMessages,
@@ -333,8 +332,6 @@ export class InputText
   /** the computed icon to render */
   private requestedIcon?: string;
 
-  mutationObserver = createObserver("mutation", () => this.setDisabledAction());
-
   private userChangedValue = false;
 
   @State() effectiveLocale: string;
@@ -366,7 +363,6 @@ export class InputText
 
     connectLabel(this);
     connectForm(this);
-    this.mutationObserver?.observe(this.el, { childList: true });
     this.setDisabledAction();
     this.el.addEventListener(internalHiddenInputInputEvent, this.onHiddenFormInputInput);
   }
@@ -377,8 +373,6 @@ export class InputText
     disconnectForm(this);
     disconnectLocalized(this);
     disconnectMessages(this);
-
-    this.mutationObserver?.disconnect();
     this.el.removeEventListener(internalHiddenInputInputEvent, this.onHiddenFormInputInput);
   }
 
@@ -623,6 +617,8 @@ export class InputText
     }
   };
 
+  private handleSlotChange = (): void => this.setDisabledAction();
+
   // --------------------------------------------------------------------------
   //
   //  Render Methods
@@ -703,7 +699,7 @@ export class InputText
               {this.loading ? loader : null}
             </div>
             <div class={CSS.actionWrapper}>
-              <slot name={SLOTS.action} />
+              <slot name={SLOTS.action} onSlotchange={this.handleSlotChange} />
             </div>
             {this.suffixText ? suffixText : null}
             <HiddenFormInputSlot component={this} />
diff --git a/packages/calcite-components/src/components/input/input.tsx b/packages/calcite-components/src/components/input/input.tsx
index 14093eb1352..45add7c3cf1 100644
--- a/packages/calcite-components/src/components/input/input.tsx
+++ b/packages/calcite-components/src/components/input/input.tsx
@@ -57,7 +57,6 @@ import {
   parseNumberString,
   sanitizeNumberString,
 } from "../../utils/number";
-import { createObserver } from "../../utils/observers";
 import { CSS_UTILITY } from "../../utils/resources";
 import {
   connectMessages,
@@ -483,8 +482,6 @@ export class Input
 
   private nudgeNumberValueIntervalId: number;
 
-  mutationObserver = createObserver("mutation", () => this.setDisabledAction());
-
   private userChangedValue = false;
 
   //--------------------------------------------------------------------------
@@ -524,8 +521,6 @@ export class Input
     connectLabel(this);
     connectForm(this);
 
-    this.mutationObserver?.observe(this.el, { childList: true });
-
     this.setDisabledAction();
     this.el.addEventListener(internalHiddenInputInputEvent, this.onHiddenFormInputInput);
   }
@@ -537,7 +532,6 @@ export class Input
     disconnectLocalized(this);
     disconnectMessages(this);
 
-    this.mutationObserver?.disconnect();
     this.el.removeEventListener(internalHiddenInputInputEvent, this.onHiddenFormInputInput);
   }
 
@@ -1078,6 +1072,8 @@ export class Input
     }
   }
 
+  private handleSlotChange = (): void => this.setDisabledAction();
+
   // --------------------------------------------------------------------------
   //
   //  Render Methods
@@ -1261,7 +1257,7 @@ export class Input
               {this.loading ? loader : null}
             </div>
             <div class={CSS.actionWrapper}>
-              <slot name={SLOTS.action} />
+              <slot name={SLOTS.action} onSlotchange={this.handleSlotChange} />
             </div>
             {this.type === "number" && this.numberButtonType === "vertical" && !this.readOnly
               ? numberButtonsVertical
diff --git a/packages/calcite-components/src/components/list/list.tsx b/packages/calcite-components/src/components/list/list.tsx
index 06e4c43b583..f6c04bc16c1 100755
--- a/packages/calcite-components/src/components/list/list.tsx
+++ b/packages/calcite-components/src/components/list/list.tsx
@@ -21,7 +21,6 @@ import {
   InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
-import { createObserver } from "../../utils/observers";
 import { SelectionMode } from "../interfaces";
 import { ItemData } from "../list-item/interfaces";
 import { MAX_COLUMNS } from "../list-item/resources";
@@ -406,8 +405,6 @@ export class List
 
     connectLocalized(this);
     connectMessages(this);
-    this.connectObserver();
-    this.updateListItems();
     this.setUpSorting();
     connectInteractive(this);
     this.setParentList();
@@ -431,7 +428,6 @@ export class List
       return;
     }
 
-    this.disconnectObserver();
     disconnectSortableComponent(this);
     disconnectInteractive(this);
     disconnectLocalized(this);
@@ -475,8 +471,6 @@ export class List
 
   listItems: HTMLCalciteListItemElement[] = [];
 
-  mutationObserver = createObserver("mutation", () => this.updateListItems());
-
   visibleItems: HTMLCalciteListItemElement[] = [];
 
   parentListEl: HTMLCalciteListElement;
@@ -637,14 +631,6 @@ export class List
     ) : null;
   }
 
-  private connectObserver(): void {
-    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
-  }
-
-  private disconnectObserver(): void {
-    this.mutationObserver?.disconnect();
-  }
-
   private setUpSorting(): void {
     const { dragEnabled } = this;
 
@@ -655,14 +641,6 @@ export class List
     connectSortableComponent(this);
   }
 
-  onGlobalDragStart(): void {
-    this.disconnectObserver();
-  }
-
-  onGlobalDragEnd(): void {
-    this.connectObserver();
-  }
-
   onDragEnd(detail: ListDragDetail): void {
     this.calciteListDragEnd.emit(detail);
   }
@@ -683,6 +661,7 @@ export class List
   }
 
   private handleDefaultSlotChange = (event: Event): void => {
+    this.updateListItems();
     updateListItemChildren(getListItemChildren(event.target as HTMLSlotElement));
     if (this.parentListEl) {
       this.calciteInternalListDefaultSlotChange.emit();
@@ -986,7 +965,6 @@ export class List
       newIndex = oldIndex === lastIndex ? 0 : oldIndex + 1;
     }
 
-    this.disconnectObserver();
     handle.blurUnselectDisabled = true;
 
     const referenceEl =
@@ -997,7 +975,6 @@ export class List
     parentEl.insertBefore(dragEl, referenceEl);
 
     this.updateListItems();
-    this.connectObserver();
 
     this.calciteListOrderChange.emit({
       dragEl,
diff --git a/packages/calcite-components/src/components/radio-button-group/radio-button-group.tsx b/packages/calcite-components/src/components/radio-button-group/radio-button-group.tsx
index a94b5c5c3a4..06b76fc124e 100644
--- a/packages/calcite-components/src/components/radio-button-group/radio-button-group.tsx
+++ b/packages/calcite-components/src/components/radio-button-group/radio-button-group.tsx
@@ -12,7 +12,6 @@ import {
   VNode,
   Watch,
 } from "@stencil/core";
-import { createObserver } from "../../utils/observers";
 import { Layout, Scale, Status } from "../interfaces";
 import {
   componentFocusable,
@@ -103,8 +102,6 @@ export class RadioButtonGroup implements LoadableComponent {
 
   @Element() el!: HTMLCalciteRadioButtonGroupElement;
 
-  mutationObserver = createObserver("mutation", () => this.passPropsToRadioButtons());
-
   @State() radioButtons: HTMLCalciteRadioButtonElement[] = [];
 
   //--------------------------------------------------------------------------
@@ -113,11 +110,6 @@ export class RadioButtonGroup implements LoadableComponent {
   //
   //--------------------------------------------------------------------------
 
-  connectedCallback(): void {
-    this.passPropsToRadioButtons();
-    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
-  }
-
   componentWillLoad(): void {
     setUpLoadableComponent(this);
   }
@@ -126,10 +118,6 @@ export class RadioButtonGroup implements LoadableComponent {
     setComponentLoaded(this);
   }
 
-  disconnectedCallback(): void {
-    this.mutationObserver?.disconnect();
-  }
-
   //--------------------------------------------------------------------------
   //
   //  Private Methods
@@ -155,6 +143,8 @@ export class RadioButtonGroup implements LoadableComponent {
     return this.radioButtons.find((radiobutton) => !radiobutton.disabled) ?? null;
   }
 
+  private handleSlotChange = (): void => this.passPropsToRadioButtons();
+
   //--------------------------------------------------------------------------
   //
   //  Events
@@ -206,7 +196,7 @@ export class RadioButtonGroup implements LoadableComponent {
     return (
       <Host role="radiogroup">
         <div class={CSS.itemWrapper}>
-          <slot />
+          <slot onSlotchange={this.handleSlotChange} />
         </div>
         {this.validationMessage && this.status === "invalid" ? (
           <Validation
diff --git a/packages/calcite-components/src/components/segmented-control/segmented-control.tsx b/packages/calcite-components/src/components/segmented-control/segmented-control.tsx
index 857c9259c4a..6a4fcdf1285 100644
--- a/packages/calcite-components/src/components/segmented-control/segmented-control.tsx
+++ b/packages/calcite-components/src/components/segmented-control/segmented-control.tsx
@@ -36,7 +36,6 @@ import {
   setUpLoadableComponent,
 } from "../../utils/loadable";
 import { Appearance, Layout, Scale, Status, Width } from "../interfaces";
-import { createObserver } from "../../utils/observers";
 import { Validation } from "../functional/Validation";
 import { CSS } from "./resources";
 
@@ -182,7 +181,6 @@ export class SegmentedControl
     connectInteractive(this);
     connectLabel(this);
     connectForm(this);
-    this.mutationObserver?.observe(this.el, { childList: true });
 
     this.handleItemPropChange();
   }
@@ -203,7 +201,7 @@ export class SegmentedControl
       <Host onClick={this.handleClick} role="radiogroup">
         <div class={CSS.itemWrapper}>
           <InteractiveContainer disabled={this.disabled}>
-            <slot />
+            <slot onSlotchange={this.handleSlotChange} />
             <HiddenFormInputSlot component={this} />
           </InteractiveContainer>
         </div>
@@ -333,8 +331,6 @@ export class SegmentedControl
 
   defaultValue: SegmentedControl["value"];
 
-  private mutationObserver = createObserver("mutation", () => this.setUpItems());
-
   private handleItemPropChange(): void {
     const items = this.getItems();
 
@@ -401,4 +397,6 @@ export class SegmentedControl
       items[0].tabIndex = 0;
     }
   }
+
+  private handleSlotChange = (): void => this.setUpItems();
 }
diff --git a/packages/calcite-components/src/components/sortable-list/sortable-list.tsx b/packages/calcite-components/src/components/sortable-list/sortable-list.tsx
index 13895ef15d8..8df45c15efb 100644
--- a/packages/calcite-components/src/components/sortable-list/sortable-list.tsx
+++ b/packages/calcite-components/src/components/sortable-list/sortable-list.tsx
@@ -7,7 +7,6 @@ import {
   InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
-import { createObserver } from "../../utils/observers";
 import { HandleNudge } from "../handle/interfaces";
 import { Layout } from "../interfaces";
 import {
@@ -87,10 +86,6 @@ export class SortableList implements InteractiveComponent, SortableComponent {
 
   items: Element[] = [];
 
-  mutationObserver = createObserver("mutation", () => {
-    this.setUpSorting();
-  });
-
   sortable: Sortable;
 
   dragEnabled = true;
@@ -106,8 +101,6 @@ export class SortableList implements InteractiveComponent, SortableComponent {
       return;
     }
 
-    this.setUpSorting();
-    this.beginObserving();
     connectInteractive(this);
   }
 
@@ -118,7 +111,6 @@ export class SortableList implements InteractiveComponent, SortableComponent {
 
     disconnectInteractive(this);
     disconnectSortableComponent(this);
-    this.endObserving();
   }
 
   componentDidRender(): void {
@@ -147,14 +139,6 @@ export class SortableList implements InteractiveComponent, SortableComponent {
   //
   // --------------------------------------------------------------------------
 
-  onGlobalDragStart(): void {
-    this.endObserving();
-  }
-
-  onGlobalDragEnd(): void {
-    this.beginObserving();
-  }
-
   onDragEnd(): void {}
 
   onDragStart(): void {}
@@ -196,8 +180,6 @@ export class SortableList implements InteractiveComponent, SortableComponent {
       }
     }
 
-    this.endObserving();
-
     if (appendInstead) {
       sortItem.parentElement.appendChild(sortItem);
     } else {
@@ -206,7 +188,6 @@ export class SortableList implements InteractiveComponent, SortableComponent {
 
     this.items = Array.from(this.el.children);
 
-    this.beginObserving();
     requestAnimationFrame(() => focusElement(handle));
 
     if ("selected" in handle) {
@@ -219,13 +200,7 @@ export class SortableList implements InteractiveComponent, SortableComponent {
     connectSortableComponent(this);
   }
 
-  beginObserving(): void {
-    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
-  }
-
-  endObserving(): void {
-    this.mutationObserver?.disconnect();
-  }
+  private handleSlotChange = (): void => this.setUpSorting();
 
   // --------------------------------------------------------------------------
   //
@@ -246,7 +221,7 @@ export class SortableList implements InteractiveComponent, SortableComponent {
             [CSS.containerHorizontal]: horizontal,
           }}
         >
-          <slot />
+          <slot onSlotchange={this.handleSlotChange} />
         </div>
       </InteractiveContainer>
     );
diff --git a/packages/calcite-components/src/components/stepper/stepper.tsx b/packages/calcite-components/src/components/stepper/stepper.tsx
index c173138ee42..7bacaca5de5 100644
--- a/packages/calcite-components/src/components/stepper/stepper.tsx
+++ b/packages/calcite-components/src/components/stepper/stepper.tsx
@@ -15,7 +15,6 @@ import {
 } from "@stencil/core";
 import { focusElementInGroup, slotChangeGetAssignedElements } from "../../utils/dom";
 import { Position, Scale } from "../interfaces";
-import { createObserver } from "../../utils/observers";
 import { guid } from "../../utils/guid";
 import {
   connectLocalized,
@@ -139,8 +138,6 @@ export class Stepper implements LocalizedComponent, T9nComponent {
   //--------------------------------------------------------------------------
 
   connectedCallback(): void {
-    this.mutationObserver?.observe(this.el, { childList: true });
-    this.updateItems();
     connectMessages(this);
     connectLocalized(this);
   }
@@ -167,7 +164,6 @@ export class Stepper implements LocalizedComponent, T9nComponent {
   disconnectedCallback(): void {
     disconnectMessages(this);
     disconnectLocalized(this);
-    this.mutationObserver?.disconnect();
   }
 
   render(): VNode {
@@ -360,8 +356,6 @@ export class Stepper implements LocalizedComponent, T9nComponent {
 
   private items: HTMLCalciteStepperItemElement[] = [];
 
-  private mutationObserver = createObserver("mutation", () => this.updateItems());
-
   /** Specifies if the user is viewing one `stepper-item` at a time when the page width is less than sum of min-width of each item. */
   private multipleViewMode = false;
 
@@ -376,7 +370,7 @@ export class Stepper implements LocalizedComponent, T9nComponent {
   //--------------------------------------------------------------------------
 
   private updateItems(): void {
-    this.el.querySelectorAll("calcite-stepper-item").forEach((item) => {
+    this.items.forEach((item) => {
       item.icon = this.icon;
       item.numbered = this.numbered;
       item.layout = this.layout;
@@ -503,5 +497,6 @@ export class Stepper implements LocalizedComponent, T9nComponent {
     this.containerEl.style.gridTemplateAreas = spacing;
     this.containerEl.style.gridTemplateColumns = spacing;
     this.setStepperItemNumberingSystem();
+    this.updateItems();
   };
 }
diff --git a/packages/calcite-components/src/components/tab-title/tab-title.tsx b/packages/calcite-components/src/components/tab-title/tab-title.tsx
index b3f695d8924..f4595750ff5 100644
--- a/packages/calcite-components/src/components/tab-title/tab-title.tsx
+++ b/packages/calcite-components/src/components/tab-title/tab-title.tsx
@@ -1,5 +1,4 @@
 import {
-  Build,
   Component,
   Element,
   Event,
@@ -13,7 +12,12 @@ import {
   VNode,
   Watch,
 } from "@stencil/core";
-import { getElementDir, toAriaBoolean, nodeListToArray } from "../../utils/dom";
+import {
+  getElementDir,
+  nodeListToArray,
+  slotChangeHasTextContent,
+  toAriaBoolean,
+} from "../../utils/dom";
 import { guid } from "../../utils/guid";
 import {
   connectInteractive,
@@ -22,7 +26,6 @@ import {
   InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
-import { createObserver } from "../../utils/observers";
 import { FlipContext, Scale } from "../interfaces";
 import { TabChangeEventDetail, TabCloseEventDetail } from "../tab/interfaces";
 import { TabID, TabLayout, TabPosition } from "../tabs/interfaces";
@@ -35,6 +38,7 @@ import {
   updateMessages,
 } from "../../utils/t9n";
 import { getIconScale } from "../../utils/component";
+import { createObserver } from "../../utils/observers";
 import { TabTitleMessages } from "./assets/tab-title/t9n";
 import { CSS, ICONS } from "./resources";
 
@@ -150,13 +154,11 @@ export class TabTitle implements InteractiveComponent, LocalizedComponent, T9nCo
     connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
-    this.setupTextContentObserver();
     this.parentTabNavEl = this.el.closest("calcite-tab-nav");
     this.parentTabsEl = this.el.closest("calcite-tabs");
   }
 
   disconnectedCallback(): void {
-    this.mutationObserver?.disconnect();
     // Dispatching to body in order to be listened by other elements that are still connected to the DOM.
     document.body?.dispatchEvent(
       new CustomEvent("calciteTabTitleUnregister", {
@@ -171,9 +173,6 @@ export class TabTitle implements InteractiveComponent, LocalizedComponent, T9nCo
 
   async componentWillLoad(): Promise<void> {
     await setUpMessages(this);
-    if (Build.isBrowser) {
-      this.updateHasText();
-    }
     if (this.tab && this.selected) {
       this.activateTab(false);
     }
@@ -228,7 +227,7 @@ export class TabTitle implements InteractiveComponent, LocalizedComponent, T9nCo
           >
             <div class={{ [CSS.content]: true, [CSS.contentHasText]: this.hasText }}>
               {this.iconStart ? iconStartEl : null}
-              <slot />
+              <slot onSlotchange={this.handleSlotChange} />
               {this.iconEnd ? iconEndEl : null}
             </div>
             {this.renderCloseButton()}
@@ -463,6 +462,10 @@ export class TabTitle implements InteractiveComponent, LocalizedComponent, T9nCo
     this.closeTabTitleAndNotify();
   };
 
+  private handleSlotChange = (event: Event): void => {
+    this.hasText = slotChangeHasTextContent(event);
+  };
+
   //--------------------------------------------------------------------------
   //
   //  Private State/Props
@@ -471,9 +474,6 @@ export class TabTitle implements InteractiveComponent, LocalizedComponent, T9nCo
 
   @Element() el: HTMLCalciteTabTitleElement;
 
-  /** watches for changing text content */
-  mutationObserver: MutationObserver = createObserver("mutation", () => this.updateHasText());
-
   @State() controls: string;
 
   @State() defaultMessages: TabTitleMessages;
@@ -500,14 +500,6 @@ export class TabTitle implements InteractiveComponent, LocalizedComponent, T9nCo
     this.calciteInternalTabIconChanged.emit();
   });
 
-  updateHasText(): void {
-    this.hasText = this.el.textContent.trim().length > 0;
-  }
-
-  setupTextContentObserver(): void {
-    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
-  }
-
   closeTabTitleAndNotify(): void {
     this.closed = true;
     this.calciteInternalTabsClose.emit({ tab: this.tab });
diff --git a/packages/calcite-components/src/components/tabs/tabs.tsx b/packages/calcite-components/src/components/tabs/tabs.tsx
index a38b152e680..1e4867ac540 100644
--- a/packages/calcite-components/src/components/tabs/tabs.tsx
+++ b/packages/calcite-components/src/components/tabs/tabs.tsx
@@ -1,6 +1,5 @@
 import { Component, Element, Fragment, h, Listen, Prop, State, VNode, Watch } from "@stencil/core";
 import { Scale } from "../interfaces";
-import { createObserver } from "../../utils/observers";
 import { TabLayout, TabPosition } from "./interfaces";
 import { SLOTS } from "./resources";
 
@@ -52,25 +51,12 @@ export class Tabs {
   //
   //--------------------------------------------------------------------------
 
-  connectedCallback(): void {
-    this.mutationObserver.observe(this.el, { childList: true });
-    this.updateItems();
-  }
-
-  async componentWillLoad(): Promise<void> {
-    this.updateItems();
-  }
-
-  disconnectedCallback(): void {
-    this.mutationObserver?.disconnect();
-  }
-
   render(): VNode {
     return (
       <Fragment>
-        <slot name={SLOTS.titleGroup} />
+        <slot name={SLOTS.titleGroup} onSlotchange={this.handleTitleGroupSlotChange} />
         <section>
-          <slot />
+          <slot onSlotchange={this.handleSlotChange} />
         </section>
       </Fragment>
     );
@@ -153,19 +139,6 @@ export class Tabs {
    */
   @State() tabs: HTMLCalciteTabElement[] = [];
 
-  mutationObserver = createObserver("mutation", (mutationsList: MutationRecord[]) => {
-    for (const mutation of mutationsList) {
-      const target = mutation.target as HTMLElement;
-      if (
-        target.nodeName === "CALCITE-TAB-NAV" ||
-        target.nodeName === "CALCITE-TAB-TITLE" ||
-        target.nodeName === "CALCITE-TAB"
-      ) {
-        this.updateItems();
-      }
-    }
-  });
-
   private updateItems(): void {
     const { position, scale } = this;
 
@@ -240,4 +213,8 @@ export class Tabs {
     this.tabs.forEach((el) => el.updateAriaInfo(tabIds, titleIds));
     this.titles.forEach((el) => el.updateAriaInfo(tabIds, titleIds));
   }
+
+  private handleSlotChange = (): void => this.updateItems();
+
+  private handleTitleGroupSlotChange = (): void => this.updateItems();
 }
diff --git a/packages/calcite-components/src/components/tile-group/tile-group.tsx b/packages/calcite-components/src/components/tile-group/tile-group.tsx
index ab10203d57a..dc04ca88f2d 100644
--- a/packages/calcite-components/src/components/tile-group/tile-group.tsx
+++ b/packages/calcite-components/src/components/tile-group/tile-group.tsx
@@ -17,7 +17,6 @@ import {
   updateHostInteraction,
 } from "../../utils/interactive";
 import { Alignment, Layout, Scale, SelectionAppearance, SelectionMode } from "../interfaces";
-import { createObserver } from "../../utils/observers";
 import { focusElementInGroup } from "../../utils/dom";
 import { SelectableGroupComponent } from "../../utils/selectableComponent";
 import { CSS } from "./resources";
@@ -62,7 +61,7 @@ export class TileGroup implements InteractiveComponent, SelectableGroupComponent
 
   @Watch("scale")
   scaleWatcher(): void {
-    this.updateTiles();
+    this.updateItems();
   }
 
   /**
@@ -96,7 +95,7 @@ export class TileGroup implements InteractiveComponent, SelectableGroupComponent
   @Watch("selectionMode")
   @Watch("selectionAppearance")
   handleSelectionModeOrAppearanceChange(): void {
-    this.updateTiles();
+    this.updateItems();
   }
 
   //--------------------------------------------------------------------------
@@ -119,12 +118,10 @@ export class TileGroup implements InteractiveComponent, SelectableGroupComponent
 
   private getSlottedTiles = (): HTMLCalciteTileElement[] => {
     return this.slotEl
-      ?.assignedElements({ flatten: true })
-      .filter((el) => el?.matches("calcite-tile")) as HTMLCalciteTileElement[];
+      .assignedElements({ flatten: true })
+      .filter((el) => el.matches("calcite-tile")) as HTMLCalciteTileElement[];
   };
 
-  private mutationObserver = createObserver("mutation", () => this.updateTiles());
-
   private selectItem = (item: HTMLCalciteTileElement): void => {
     if (!item) {
       return;
@@ -172,9 +169,9 @@ export class TileGroup implements InteractiveComponent, SelectableGroupComponent
     }
   };
 
-  private updateTiles = (): void => {
+  private updateItems = (): void => {
     this.items = this.getSlottedTiles();
-    this.items?.forEach((el) => {
+    this.items.forEach((el) => {
       el.alignment = this.alignment;
       el.interactive = true;
       el.layout = this.layout;
@@ -185,6 +182,8 @@ export class TileGroup implements InteractiveComponent, SelectableGroupComponent
     this.updateSelectedItems();
   };
 
+  private handleSlotChange = (): void => this.updateItems();
+
   //--------------------------------------------------------------------------
   //
   //  Events
@@ -202,8 +201,6 @@ export class TileGroup implements InteractiveComponent, SelectableGroupComponent
 
   connectedCallback(): void {
     connectInteractive(this);
-    this.mutationObserver?.observe(this.el, { childList: true });
-    this.updateTiles();
   }
 
   componentDidRender(): void {
@@ -212,7 +209,6 @@ export class TileGroup implements InteractiveComponent, SelectableGroupComponent
 
   disconnectedCallback(): void {
     disconnectInteractive(this);
-    this.mutationObserver?.disconnect();
   }
 
   //--------------------------------------------------------------------------
@@ -265,7 +261,7 @@ export class TileGroup implements InteractiveComponent, SelectableGroupComponent
     return (
       <InteractiveContainer disabled={this.disabled}>
         <div aria-label={this.label} class={CSS.container} role={role}>
-          <slot onSlotchange={this.updateTiles} ref={this.setSlotEl} />
+          <slot onSlotchange={this.handleSlotChange} ref={this.setSlotEl} />
         </div>
       </InteractiveContainer>
     );
diff --git a/packages/calcite-components/src/utils/sortableComponent.ts b/packages/calcite-components/src/utils/sortableComponent.ts
index 2abdf29b32e..54968a9a1c2 100644
--- a/packages/calcite-components/src/utils/sortableComponent.ts
+++ b/packages/calcite-components/src/utils/sortableComponent.ts
@@ -63,12 +63,12 @@ export interface SortableComponent {
   /**
    * Called when any sortable component drag starts. For internal use only. Any public drag events should emit within `onDragStart()`.
    */
-  onGlobalDragStart: () => void;
+  onGlobalDragStart?: () => void;
 
   /**
    * Called when any sortable component drag ends. For internal use only. Any public drag events should emit within `onDragEnd()`.
    */
-  onGlobalDragEnd: () => void;
+  onGlobalDragEnd?: () => void;
 
   /**
    * Called when a component's dragging ends.
@@ -132,12 +132,12 @@ export function connectSortableComponent(component: SortableComponent): void {
     filter: `${handle}[disabled]`,
     onStart: ({ from: fromEl, item: dragEl, to: toEl, newIndex, oldIndex }) => {
       dragState.active = true;
-      onGlobalDragStart();
+      onGlobalDragStart?.();
       component.onDragStart({ fromEl, dragEl, toEl, newIndex, oldIndex });
     },
     onEnd: ({ from: fromEl, item: dragEl, to: toEl, newIndex, oldIndex }) => {
       dragState.active = false;
-      onGlobalDragEnd();
+      onGlobalDragEnd?.();
       component.onDragEnd({ fromEl, dragEl, toEl, newIndex, oldIndex });
     },
     onSort: ({ from: fromEl, item: dragEl, to: toEl, newIndex, oldIndex }) => {
@@ -171,9 +171,9 @@ export function dragActive(component: SortableComponent): boolean {
 }
 
 function onGlobalDragStart(): void {
-  Array.from(sortableComponentSet).forEach((component) => component.onGlobalDragStart());
+  Array.from(sortableComponentSet).forEach((component) => component.onGlobalDragStart?.());
 }
 
 function onGlobalDragEnd(): void {
-  Array.from(sortableComponentSet).forEach((component) => component.onGlobalDragEnd());
+  Array.from(sortableComponentSet).forEach((component) => component.onGlobalDragEnd?.());
 }