From 92bde9c66ba5aefe29255c94c3f86de2e99ba95b Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Tue, 23 Jan 2024 09:15:33 -0600
Subject: [PATCH] fixes #1730 (#1820)

---
 docs/pages/resources/changelog.md         |  1 +
 src/components/option/option.component.ts | 17 ++++++++++++++++-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md
index d1d03f4b..283713ff 100644
--- a/docs/pages/resources/changelog.md
+++ b/docs/pages/resources/changelog.md
@@ -23,6 +23,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti
 - Fixed a bug in `<sl-input>` and `<sl-textarea>` that made it work differently from `<input>` and `<textarea>` when using defaults [#1746]
 - Fixed a bug in `<sl-select>` that prevented it from closing when tabbing to another select inside a shadow root [#1763]
 - Fixed a bug in `<sl-spinner>` that caused the animation to appear strange in certain circumstances [#1787]
+- Fixed a bug in `<sl-option>` that caused slotted content to show up when calling `getTextLabel()` [#1730]
 - Improved the accessibility of `<sl-tooltip>` so they persist when hovering over the tooltip and dismiss when pressing [[Esc]] [#1734]
 
 ## 2.12.0
diff --git a/src/components/option/option.component.ts b/src/components/option/option.component.ts
index d92ba406..142e2628 100644
--- a/src/components/option/option.component.ts
+++ b/src/components/option/option.component.ts
@@ -106,7 +106,22 @@ export default class SlOption extends ShoelaceElement {
 
   /** Returns a plain text label based on the option's content. */
   getTextLabel() {
-    return (this.textContent ?? '').trim();
+    const nodes = this.childNodes;
+    let label = '';
+
+    [...nodes].forEach(node => {
+      if (node.nodeType === Node.ELEMENT_NODE) {
+        if (!(node as HTMLElement).hasAttribute('slot')) {
+          label += (node as HTMLElement).outerHTML;
+        }
+      }
+
+      if (node.nodeType === Node.TEXT_NODE) {
+        label += node.textContent;
+      }
+    });
+
+    return label.trim();
   }
 
   render() {