bulletproof part selectors

src/components/alert/alert.test.ts

@@ -5,21 +5,21 @@ import type SlAlert from './alert';
 describe('<sl-alert>', () => {
   it('should be visible with the open attribute', async () => {
     const el = await fixture<SlAlert>(html` <sl-alert open>I am an alert</sl-alert> `);
-    const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
+    const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
 
     expect(base.hidden).to.be.false;
   });
 
   it('should not be visible without the open attribute', async () => {
     const el = await fixture<SlAlert>(html` <sl-alert>I am an alert</sl-alert> `);
-    const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
+    const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
 
     expect(base.hidden).to.be.true;
   });
 
   it('should emit sl-show and sl-after-show when calling show()', async () => {
     const el = await fixture<SlAlert>(html` <sl-alert>I am an alert</sl-alert> `);
-    const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
+    const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
     const showHandler = sinon.spy();
     const afterShowHandler = sinon.spy();
 
@@ -37,7 +37,7 @@ describe('<sl-alert>', () => {
 
   it('should emit sl-hide and sl-after-hide when calling hide()', async () => {
     const el = await fixture<SlAlert>(html` <sl-alert open>I am an alert</sl-alert> `);
-    const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
+    const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
     const hideHandler = sinon.spy();
     const afterHideHandler = sinon.spy();
 
@@ -55,7 +55,7 @@ describe('<sl-alert>', () => {
 
   it('should emit sl-show and sl-after-show when setting open = true', async () => {
     const el = await fixture<SlAlert>(html` <sl-alert>I am an alert</sl-alert> `);
-    const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
+    const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
     const showHandler = sinon.spy();
     const afterShowHandler = sinon.spy();
 
@@ -73,7 +73,7 @@ describe('<sl-alert>', () => {
 
   it('should emit sl-hide and sl-after-hide when setting open = false', async () => {
     const el = await fixture<SlAlert>(html` <sl-alert open>I am an alert</sl-alert> `);
-    const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
+    const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
     const hideHandler = sinon.spy();
     const afterHideHandler = sinon.spy();
 

src/components/alert/alert.ts

@@ -50,7 +50,7 @@ export default class SlAlert extends ShoelaceElement {
   private readonly hasSlotController = new HasSlotController(this, 'icon', 'suffix');
   private readonly localize = new LocalizeController(this);
 
-  @query('[part="base"]') base: HTMLElement;
+  @query('[part~="base"]') base: HTMLElement;
 
   /** Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. */
   @property({ type: Boolean, reflect: true }) open = false;

src/components/avatar/avatar.test.ts

@@ -15,7 +15,7 @@ describe('<sl-avatar>', () => {
     });
 
     it('should default to circle styling', () => {
-      const part = el.shadowRoot!.querySelector('[part="base"]')!;
+      const part = el.shadowRoot!.querySelector('[part~="base"]')!;
       expect(el.getAttribute('shape')).to.eq('circle');
       expect(part.classList.value.trim()).to.eq('avatar avatar--circle');
     });
@@ -40,13 +40,13 @@ describe('<sl-avatar>', () => {
     });
 
     it('renders "image" part, with src and a role of presentation', () => {
-      const part = el.shadowRoot!.querySelector('[part="image"]')!;
+      const part = el.shadowRoot!.querySelector('[part~="image"]')!;
 
       expect(part.getAttribute('src')).to.eq(image);
     });
 
     it('renders the label attribute in the "base" part', () => {
-      const part = el.shadowRoot!.querySelector('[part="base"]')!;
+      const part = el.shadowRoot!.querySelector('[part~="base"]')!;
 
       expect(part.getAttribute('aria-label')).to.eq(label);
     });
@@ -63,7 +63,7 @@ describe('<sl-avatar>', () => {
     });
 
     it('renders "initials" part, with initials as the text node', () => {
-      const part = el.shadowRoot!.querySelector<HTMLElement>('[part="initials"]')!;
+      const part = el.shadowRoot!.querySelector<HTMLElement>('[part~="initials"]')!;
 
       expect(part.innerText).to.eq(initials);
     });
@@ -80,7 +80,7 @@ describe('<sl-avatar>', () => {
       });
 
       it('appends the appropriate class on the "base" part', () => {
-        const part = el.shadowRoot!.querySelector('[part="base"]')!;
+        const part = el.shadowRoot!.querySelector('[part~="base"]')!;
 
         expect(el.getAttribute('shape')).to.eq(shape);
         expect(part.classList.value.trim()).to.eq(`avatar avatar--${shape}`);

src/components/badge/badge.test.ts

@@ -12,7 +12,7 @@ describe('<sl-badge>', () => {
     it('should pass accessibility tests with a role of status on the base part.', async () => {
       await expect(el).to.be.accessible();
 
-      const part = el.shadowRoot!.querySelector('[part="base"]')!;
+      const part = el.shadowRoot!.querySelector('[part~="base"]')!;
       expect(part.getAttribute('role')).to.eq('status');
     });
 
@@ -21,7 +21,7 @@ describe('<sl-badge>', () => {
     });
 
     it('should default to square styling, with the primary color', () => {
-      const part = el.shadowRoot!.querySelector('[part="base"]')!;
+      const part = el.shadowRoot!.querySelector('[part~="base"]')!;
       expect(part.classList.value.trim()).to.eq('badge badge--primary');
     });
   });
@@ -36,7 +36,7 @@ describe('<sl-badge>', () => {
     });
 
     it('should append the pill class to the classlist to render a pill', () => {
-      const part = el.shadowRoot!.querySelector('[part="base"]')!;
+      const part = el.shadowRoot!.querySelector('[part~="base"]')!;
       expect(part.classList.value.trim()).to.eq('badge badge--primary badge--pill');
     });
   });
@@ -51,7 +51,7 @@ describe('<sl-badge>', () => {
     });
 
     it('should append the pulse class to the classlist to render a pulse', () => {
-      const part = el.shadowRoot!.querySelector('[part="base"]')!;
+      const part = el.shadowRoot!.querySelector('[part~="base"]')!;
       expect(part.classList.value.trim()).to.eq('badge badge--primary badge--pulse');
     });
   });
@@ -67,7 +67,7 @@ describe('<sl-badge>', () => {
       });
 
       it('should default to square styling, with the primary color', () => {
-        const part = el.shadowRoot!.querySelector('[part="base"]')!;
+        const part = el.shadowRoot!.querySelector('[part~="base"]')!;
         expect(part.classList.value.trim()).to.eq(`badge badge--${variant}`);
       });
     });

src/components/breadcrumb-item/breadcrumb-item.test.ts

@@ -14,12 +14,12 @@ describe('<sl-breadcrumb-item>', () => {
     });
 
     it('should hide the separator from screen readers', () => {
-      const separator = el.shadowRoot!.querySelector<HTMLSpanElement>('[part="separator"]');
+      const separator = el.shadowRoot!.querySelector<HTMLSpanElement>('[part~="separator"]');
       expect(separator).attribute('aria-hidden', 'true');
     });
 
     it('should render a HTMLButtonElement as the part "label", with a set type "button"', () => {
-      const button = el.shadowRoot!.querySelector<HTMLButtonElement>('[part="label"]');
+      const button = el.shadowRoot!.querySelector<HTMLButtonElement>('[part~="label"]');
       expect(button).to.exist;
       expect(button).attribute('type', 'button');
     });
@@ -38,7 +38,7 @@ describe('<sl-breadcrumb-item>', () => {
       });
 
       it('should render a HTMLAnchorElement as the part "label", with the supplied href value', () => {
-        const hyperlink = el.shadowRoot!.querySelector<HTMLAnchorElement>('[part="label"]');
+        const hyperlink = el.shadowRoot!.querySelector<HTMLAnchorElement>('[part~="label"]');
         expect(hyperlink).attribute('href', 'https://jsonplaceholder.typicode.com/');
       });
     });
@@ -58,7 +58,7 @@ describe('<sl-breadcrumb-item>', () => {
         let hyperlink: HTMLAnchorElement | null;
 
         before(() => {
-          hyperlink = el.shadowRoot!.querySelector<HTMLAnchorElement>('[part="label"]');
+          hyperlink = el.shadowRoot!.querySelector<HTMLAnchorElement>('[part~="label"]');
         });
 
         it('should use the supplied href value, as the href attribute value', () => {
@@ -124,7 +124,7 @@ describe('<sl-breadcrumb-item>', () => {
     });
 
     it('should append class "breadcrumb-item--has-prefix" to "base" part', () => {
-      const part = el.shadowRoot!.querySelector('[part="base"]')!;
+      const part = el.shadowRoot!.querySelector('[part~="base"]')!;
       expect(part.classList.value.trim()).to.equal('breadcrumb-item breadcrumb-item--has-prefix');
     });
   });
@@ -151,7 +151,7 @@ describe('<sl-breadcrumb-item>', () => {
     });
 
     it('should append class "breadcrumb-item--has-suffix" to "base" part', () => {
-      const part = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
+      const part = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
       expect(part.classList.value.trim()).to.equal('breadcrumb-item breadcrumb-item--has-suffix');
     });
   });

src/components/button/button.test.ts

@@ -46,7 +46,7 @@ describe('<sl-button>', () => {
 
     it('should not have a caret present', async () => {
       const el = await fixture<SlButton>(html` <sl-button>Button Label</sl-button> `);
-      expect(el.shadowRoot?.querySelector('[part="caret"]')).not.to.exist;
+      expect(el.shadowRoot?.querySelector('[part~="caret"]')).not.to.exist;
     });
   });
 
@@ -98,7 +98,7 @@ describe('<sl-button>', () => {
   describe('when caret', () => {
     it('should have a caret present', async () => {
       const el = await fixture<SlButton>(html` <sl-button caret>Button Label</sl-button> `);
-      expect(el.shadowRoot!.querySelector('[part="caret"]')).to.exist;
+      expect(el.shadowRoot!.querySelector('[part~="caret"]')).to.exist;
     });
   });
 

src/components/checkbox/checkbox.test.ts

@@ -205,14 +205,14 @@ describe('<sl-checkbox>', () => {
   describe('indeterminate', () => {
     it('should render indeterminate icon until checked', async () => {
       const el = await fixture<SlCheckbox>(html`<sl-checkbox indeterminate></sl-checkbox>`);
-      let indeterminateIcon = el.shadowRoot!.querySelector('[part="indeterminate-icon"]')!;
+      let indeterminateIcon = el.shadowRoot!.querySelector('[part~="indeterminate-icon"]')!;
 
       expect(indeterminateIcon).not.to.be.null;
 
       el.click();
       await el.updateComplete;
 
-      indeterminateIcon = el.shadowRoot!.querySelector('[part="indeterminate-icon"]')!;
+      indeterminateIcon = el.shadowRoot!.querySelector('[part~="indeterminate-icon"]')!;
 
       expect(indeterminateIcon).to.be.null;
     });

src/components/color-picker/color-picker.test.ts

@@ -5,7 +5,7 @@ import type SlColorPicker from './color-picker';
 describe('<sl-color-picker>', () => {
   it('should emit change and show correct color when the value changes', async () => {
     const el = await fixture<SlColorPicker>(html` <sl-color-picker></sl-color-picker> `);
-    const trigger = el.shadowRoot!.querySelector<HTMLElement>('[part="trigger"]')!;
+    const trigger = el.shadowRoot!.querySelector<HTMLElement>('[part~="trigger"]')!;
     const changeHandler = sinon.spy();
     const color = 'rgb(255, 204, 0)';
 
@@ -41,15 +41,15 @@ describe('<sl-color-picker>', () => {
 
   it('should display a color when an initial value is provided', async () => {
     const el = await fixture<SlColorPicker>(html` <sl-color-picker value="#000"></sl-color-picker> `);
-    const trigger = el.shadowRoot!.querySelector<HTMLButtonElement>('[part="trigger"]');
+    const trigger = el.shadowRoot!.querySelector<HTMLButtonElement>('[part~="trigger"]');
 
     expect(trigger?.style.color).to.equal('rgb(0, 0, 0)');
   });
 
   it('should display a color with opacity when an initial value with opacity is provided', async () => {
     const el = await fixture<SlColorPicker>(html` <sl-color-picker opacity value="#ff000050"></sl-color-picker> `);
-    const trigger = el.shadowRoot!.querySelector<HTMLButtonElement>('[part="trigger"]');
-    const previewButton = el.shadowRoot!.querySelector<HTMLButtonElement>('[part="preview"]');
+    const trigger = el.shadowRoot!.querySelector<HTMLButtonElement>('[part~="trigger"]');
+    const previewButton = el.shadowRoot!.querySelector<HTMLButtonElement>('[part~="preview"]');
     const previewColor = getComputedStyle(previewButton!).getPropertyValue('--preview-color');
 
     expect(trigger!.style.color).to.equal('rgba(255, 0, 0, 0.314)');

src/components/color-picker/color-picker.ts

@@ -87,8 +87,8 @@ declare const EyeDropper: EyeDropperConstructor;
 export default class SlColorPicker extends ShoelaceElement {
   static styles: CSSResultGroup = styles;
 
-  @query('[part="input"]') input: SlInput;
-  @query('[part="preview"]') previewButton: HTMLButtonElement;
+  @query('[part~="input"]') input: SlInput;
+  @query('[part~="preview"]') previewButton: HTMLButtonElement;
   @query('.color-dropdown') dropdown: SlDropdown;
 
   // @ts-expect-error -- Controller is currently unused

src/components/dialog/dialog.test.ts

@@ -9,7 +9,7 @@ describe('<sl-dialog>', () => {
     const el = await fixture<SlDialog>(html`
       <sl-dialog open>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sl-dialog>
     `);
-    const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
+    const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
 
     expect(base.hidden).to.be.false;
   });
@@ -18,7 +18,7 @@ describe('<sl-dialog>', () => {
     const el = await fixture<SlDialog>(
       html` <sl-dialog>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sl-dialog> `
     );
-    const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
+    const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
 
     expect(base.hidden).to.be.true;
   });
@@ -27,7 +27,7 @@ describe('<sl-dialog>', () => {
     const el = await fixture<SlDialog>(html`
       <sl-dialog>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sl-dialog>
     `);
-    const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
+    const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
     const showHandler = sinon.spy();
     const afterShowHandler = sinon.spy();
 
@@ -47,7 +47,7 @@ describe('<sl-dialog>', () => {
     const el = await fixture<SlDialog>(html`
       <sl-dialog open>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sl-dialog>
     `);
-    const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
+    const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
     const hideHandler = sinon.spy();
     const afterHideHandler = sinon.spy();
 
@@ -67,7 +67,7 @@ describe('<sl-dialog>', () => {
     const el = await fixture<SlDialog>(html`
       <sl-dialog>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sl-dialog>
     `);
-    const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
+    const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
     const showHandler = sinon.spy();
     const afterShowHandler = sinon.spy();
 
@@ -87,7 +87,7 @@ describe('<sl-dialog>', () => {
     const el = await fixture<SlDialog>(html`
       <sl-dialog open>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sl-dialog>
     `);
-    const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
+    const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
     const hideHandler = sinon.spy();
     const afterHideHandler = sinon.spy();
 
@@ -107,7 +107,7 @@ describe('<sl-dialog>', () => {
     const el = await fixture<SlDialog>(html`
       <sl-dialog open>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sl-dialog>
     `);
-    const overlay = el.shadowRoot!.querySelector<HTMLElement>('[part="overlay"]')!;
+    const overlay = el.shadowRoot!.querySelector<HTMLElement>('[part~="overlay"]')!;
 
     el.addEventListener('sl-request-close', event => {
       event.preventDefault();

src/components/drawer/drawer.test.ts

@@ -9,7 +9,7 @@ describe('<sl-drawer>', () => {
     const el = await fixture<SlDrawer>(html`
       <sl-drawer open>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sl-drawer>
     `);
-    const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
+    const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
 
     expect(base.hidden).to.be.false;
   });
@@ -18,7 +18,7 @@ describe('<sl-drawer>', () => {
     const el = await fixture<SlDrawer>(
       html` <sl-drawer>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sl-drawer> `
     );
-    const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
+    const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
 
     expect(base.hidden).to.be.true;
   });
@@ -27,7 +27,7 @@ describe('<sl-drawer>', () => {
     const el = await fixture<SlDrawer>(html`
       <sl-drawer>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sl-drawer>
     `);
-    const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
+    const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
     const showHandler = sinon.spy();
     const afterShowHandler = sinon.spy();
 
@@ -47,7 +47,7 @@ describe('<sl-drawer>', () => {
     const el = await fixture<SlDrawer>(html`
       <sl-drawer open>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sl-drawer>
     `);
-    const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
+    const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
     const hideHandler = sinon.spy();
     const afterHideHandler = sinon.spy();
 
@@ -67,7 +67,7 @@ describe('<sl-drawer>', () => {
     const el = await fixture<SlDrawer>(html`
       <sl-drawer>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sl-drawer>
     `);
-    const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
+    const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
     const showHandler = sinon.spy();
     const afterShowHandler = sinon.spy();
 
@@ -87,7 +87,7 @@ describe('<sl-drawer>', () => {
     const el = await fixture<SlDrawer>(html`
       <sl-drawer open>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sl-drawer>
     `);
-    const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
+    const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
     const hideHandler = sinon.spy();
     const afterHideHandler = sinon.spy();
 
@@ -107,7 +107,7 @@ describe('<sl-drawer>', () => {
     const el = await fixture<SlDrawer>(html`
       <sl-drawer open>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sl-drawer>
     `);
-    const overlay = el.shadowRoot!.querySelector<HTMLElement>('[part="overlay"]')!;
+    const overlay = el.shadowRoot!.querySelector<HTMLElement>('[part~="overlay"]')!;
 
     el.addEventListener('sl-request-close', event => {
       event.preventDefault();