Remove html from getTextLabel()

docs/pages/resources/changelog.md

@@ -12,6 +12,10 @@ Components with the <sl-badge variant="warning" pill>Experimental</sl-badge> bad
 
 New versions of Shoelace are released as-needed and generally occur when a critical mass of changes have accumulated. At any time, you can see what's coming in the next release by visiting [next.shoelace.style](https://next.shoelace.style).
 
+## Next
+
+- Fixed a bug in `<sl-option>` that caused HTML tags to be included in `getTextLabel()`
+
 ## 2.13.1
 
 - Fixed a bug where the safe triangle was always visible when selecting nested `<sl-menu>` elements [#1835]

src/components/option/option.component.ts

@@ -112,7 +112,7 @@ export default class SlOption extends ShoelaceElement {
     [...nodes].forEach(node => {
       if (node.nodeType === Node.ELEMENT_NODE) {
         if (!(node as HTMLElement).hasAttribute('slot')) {
-          label += (node as HTMLElement).outerHTML;
+          label += (node as HTMLElement).textContent;
         }
       }
 

src/components/option/option.test.ts

@@ -52,4 +52,9 @@ describe('<sl-option>', () => {
 
     expect(el.value).to.equal('10');
   });
+
+  it('should escape HTML when calling getTextLabel()', async () => {
+    const el = await fixture<SlOption>(html` <sl-option><strong>Option</strong></sl-option> `);
+    expect(el.getTextLabel()).to.equal('Option');
+  });
 });