prefix light dom ids

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
 

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 = '';

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 = '';