diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index 1fb37ea3..a4529805 100644
--- a/docs/resources/changelog.md
+++ b/docs/resources/changelog.md
@@ -12,6 +12,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - 🚨 BREAKING: removed `base` part from `<sl-divider>` to simplify the styling API
 - Added `focus()` and `blur()` methods to `<sl-select>` [#625](https://github.com/shoelace-style/shoelace/pull/625)
 - Fixed bug where setting `tooltipFormatter` on `<sl-range>` in JSX causes React@experimental to error out
+- Added the `sl-` prefix to generated ids for `<sl-tab>` and `<sl-tab-panel>`
 - Refactored `<sl-button>` to use Lit's static expressions to reduce code
 - Simplified `<sl-spinner>` animation
 
diff --git a/src/components/tab-panel/tab-panel.ts b/src/components/tab-panel/tab-panel.ts
index 5329d6a8..dd3a90be 100644
--- a/src/components/tab-panel/tab-panel.ts
+++ b/src/components/tab-panel/tab-panel.ts
@@ -18,7 +18,7 @@ let id = 0;
 export default class SlTabPanel extends LitElement {
   static styles = styles;
 
-  private componentId = `tab-panel-${++id}`;
+  private componentId = `sl-tab-panel-${++id}`;
 
   /** The tab panel's name. */
   @property({ reflect: true }) name = '';
diff --git a/src/components/tab/tab.ts b/src/components/tab/tab.ts
index 80a6a6d3..47df8278 100644
--- a/src/components/tab/tab.ts
+++ b/src/components/tab/tab.ts
@@ -29,7 +29,7 @@ export default class SlTab extends LitElement {
 
   @query('.tab') tab: HTMLElement;
 
-  private componentId = `tab-${++id}`;
+  private componentId = `sl-tab-${++id}`;
 
   /** The name of the tab panel the tab will control. The panel must be located in the same tab group. */
   @property({ reflect: true }) panel = '';