diff --git a/packages/start/src/shared/dev-overlay/CodeView.tsx b/packages/start/src/shared/dev-overlay/CodeView.tsx
index 5af80976a..45950197f 100644
--- a/packages/start/src/shared/dev-overlay/CodeView.tsx
+++ b/packages/start/src/shared/dev-overlay/CodeView.tsx
@@ -1,15 +1,13 @@
 // @refresh skip
-import { getSingletonHighlighter, type BuiltinLanguage, type Highlighter } from "shiki";
+import { type BuiltinLanguage, getSingletonHighlighter, type Highlighter } from "shiki";
 import { loadWasm } from "shiki/engine/oniguruma";
-import { createEffect, createResource, type JSX } from "solid-js";
-
-import url from "shiki/onig.wasm?url";
-
 import langJS from "shiki/langs/javascript.mjs";
 import langJSX from "shiki/langs/jsx.mjs";
 import langTSX from "shiki/langs/tsx.mjs";
 import langTS from "shiki/langs/typescript.mjs";
+import url from "shiki/onig.wasm?url";
 import darkPlus from "shiki/themes/dark-plus.mjs";
+import { createEffect, createResource, type JSX } from "solid-js";
 
 let HIGHLIGHTER: Highlighter;
 
@@ -74,7 +72,7 @@ export function CodeView(props: CodeViewProps): JSX.Element | null {
       for (let i = 0, len = lines.length; i < len; i++) {
         const el = lines[i] as HTMLElement;
         if (props.line - minLine() - 1 === i) {
-          el.classList.add("dev-overlay-error-line");
+          el.dataset.startDevOverlayErrorLine = '';
         }
       }
     }
@@ -83,7 +81,7 @@ export function CodeView(props: CodeViewProps): JSX.Element | null {
   return (
     <div
       ref={ref}
-      class="dev-overlay-code-view"
+      data-start-dev-overlay-code-view
       style={{
         "--dev-overlay-code-view-start": minLine() + 1,
       }}
diff --git a/packages/start/src/shared/dev-overlay/DevOverlayDialog.tsx b/packages/start/src/shared/dev-overlay/DevOverlayDialog.tsx
index e3b836d7a..975e46507 100644
--- a/packages/start/src/shared/dev-overlay/DevOverlayDialog.tsx
+++ b/packages/start/src/shared/dev-overlay/DevOverlayDialog.tsx
@@ -2,7 +2,7 @@
 import ErrorStackParser from "error-stack-parser";
 import * as htmlToImage from "html-to-image";
 import type { JSX } from "solid-js";
-import { ErrorBoundary, For, Show, Suspense, createMemo, createSignal } from "solid-js";
+import { createMemo, createSignal, ErrorBoundary, For, Show, Suspense } from "solid-js";
 import { Portal } from "solid-js/web";
 // @ts-ignore - terracotta module resolution issue with NodeNext
 import { Dialog, DialogOverlay, DialogPanel, Select, SelectOption } from "terracotta";
@@ -47,9 +47,9 @@ function ErrorInfo(props: ErrorInfoProps): JSX.Element {
   });
 
   return (
-    <span class="dev-overlay-error-info">
-      <span class="dev-overlay-error-info-name">{error().name}</span>
-      <span class="dev-overlay-error-info-message">{error().message}</span>
+    <span data-start-dev-overlay-error-info>
+      <span data-start-dev-overlay-error-info-name>{error().name}</span>
+      <span data-start-dev-overlay-error-info-message>{error().message}</span>
     </span>
   );
 }
@@ -77,7 +77,7 @@ function getFilePath(source: StackFrameSource) {
 
 function CodeFallback(): JSX.Element {
   return (
-    <div class="dev-overlay-stack-frames-code-fallback">
+    <div data-start-dev-overlay-stack-frames-code-fallback>
       <span>Source not available.</span>
     </div>
   );
@@ -89,8 +89,8 @@ function StackFramesContent(props: StackFramesContentProps) {
   const [selectedFrame, setSelectedFrame] = createSignal(stackframes[0]!);
 
   return (
-    <div class="dev-overlay-stack-frames-content">
-      <div class="dev-overlay-stack-frames-code">
+    <div data-start-dev-overlay-stack-frames-content>
+      <div data-start-dev-overlay-stack-frames-code>
         <ErrorBoundary fallback={null}>
           {(() => {
             const data = createStackFrame(selectedFrame(), () => props.isCompiled);
@@ -99,8 +99,8 @@ function StackFramesContent(props: StackFramesContentProps) {
                 <Show when={data()} keyed fallback={<CodeFallback />}>
                   {source => (
                     <>
-                      <span class="dev-overlay-stack-frames-code-source">{source.source}</span>
-                      <div class="dev-overlay-stack-frames-code-container">
+                      <span data-start-dev-overlay-stack-frames-code-source>{source.source}</span>
+                      <div data-start-dev-overlay-stack-frames-code-container>
                         <CodeView
                           fileName={source.source}
                           line={source.line}
@@ -116,7 +116,7 @@ function StackFramesContent(props: StackFramesContentProps) {
         </ErrorBoundary>
       </div>
       <Select<ErrorStackParser.StackFrame>
-        class="dev-overlay-stack-frames"
+        data-start-dev-overlay-stack-frames
         value={selectedFrame()}
         onChange={setSelectedFrame}
       >
@@ -124,11 +124,11 @@ function StackFramesContent(props: StackFramesContentProps) {
           {current => (
             <ErrorBoundary
               fallback={
-                <div class="dev-overlay-stack-frame">
-                  <span class="dev-overlay-stack-frame-function">
+                <div data-start-dev-overlay-stack-frame>
+                  <span data-start-dev-overlay-stack-frame-function>
                     {current.functionName ?? "<anonymous>"}
                   </span>
-                  <span class="dev-overlay-stack-frame-file">
+                  <span data-start-dev-overlay-stack-frame-file>
                     {getFilePath({
                       source: current.getFileName()!,
                       content: "",
@@ -146,11 +146,11 @@ function StackFramesContent(props: StackFramesContentProps) {
                   <Suspense>
                     <Show when={data()} keyed>
                       {source => (
-                        <SelectOption class="dev-overlay-stack-frame" value={current}>
-                          <span class="dev-overlay-stack-frame-function">
+                        <SelectOption data-start-dev-overlay-stack-frame value={current}>
+                          <span data-start-dev-overlay-stack-frame-function>
                             {source.name ?? "<anonymous>"}
                           </span>
-                          <span class="dev-overlay-stack-frame-file">{getFilePath(source)}</span>
+                          <span data-start-dev-overlay-stack-frame-file>{getFilePath(source)}</span>
                         </SelectOption>
                       )}
                     </Show>
@@ -249,44 +249,44 @@ export default function DevOverlayDialog(props: DevOverlayDialogProps): JSX.Elem
 
   return (
     <Portal>
-      <Dialog class="dev-overlay" isOpen>
+      <Dialog data-start-dev-overlay isOpen>
         <div>
-          <DialogOverlay class="dev-overlay-background" />
-          <DialogPanel ref={setPanel} class="dev-overlay-panel-container">
-            <div class="dev-overlay-panel">
-              <div class="dev-overlay-navbar">
-                <div class="dev-overlay-navbar-left">
-                  <div class="dev-overlay-version">
+          <DialogOverlay data-start-dev-overlay-background />
+          <DialogPanel ref={setPanel} data-start-dev-overlay-panel-container>
+            <div data-start-dev-overlay-panel>
+              <div data-start-dev-overlay-navbar>
+                <div data-start-dev-overlay-navbar-left>
+                  <div data-start-dev-overlay-version>
                     <div>
                       <SolidStartIcon title="Solid Start Version" />
                     </div>
                     <span>{info.version as string}</span>
                   </div>
                   <Show when={props.errors.length > 1}>
-                    <div class="dev-overlay-pagination">
-                      <button class="dev-overlay-button" onClick={goPrev} type="button">
+                    <div data-start-dev-overlay-pagination>
+                      <button data-start-dev-overlay-button onClick={goPrev} type="button">
                         <ArrowLeftIcon title="Go Previous" />
                       </button>
-                      <div class="dev-overlay-page-counter">
+                      <div data-start-dev-overlay-page-counter>
                         {`${truncated()} of ${props.errors.length}`}
                       </div>
-                      <button class="dev-overlay-button" onClick={goNext} type="button">
+                      <button data-start-dev-overlay-button onClick={goNext} type="button">
                         <ArrowRightIcon title="Go Next" />
                       </button>
                     </div>
                   </Show>
                 </div>
-                <div class="dev-overlay-controls">
-                  <button class="dev-overlay-button" onClick={redirectToGithub} type="button">
+                <div data-start-dev-overlay-controls>
+                  <button data-start-dev-overlay-button onClick={redirectToGithub} type="button">
                     <GithubIcon title="Create an issue thread on Github" />
                   </button>
-                  <button class="dev-overlay-button" onClick={redirectToDiscord} type="button">
+                  <button data-start-dev-overlay-button onClick={redirectToDiscord} type="button">
                     <DiscordIcon title="Join our Discord Channel" />
                   </button>
-                  <button class="dev-overlay-button" onClick={downloadScreenshot} type="button">
+                  <button data-start-dev-overlay-button onClick={downloadScreenshot} type="button">
                     <CameraIcon title="Capture Error Overlay" />
                   </button>
-                  <button class="dev-overlay-button" onClick={toggleIsCompiled} type="button">
+                  <button data-start-dev-overlay-button onClick={toggleIsCompiled} type="button">
                     <Show
                       when={isCompiled()}
                       fallback={<ViewOriginalIcon title="View Original Source" />}
@@ -294,14 +294,14 @@ export default function DevOverlayDialog(props: DevOverlayDialogProps): JSX.Elem
                       <ViewCompiledIcon title="View Compiled Source" />
                     </Show>
                   </button>
-                  <button class="dev-overlay-button" onClick={props.resetError} type="button">
+                  <button data-start-dev-overlay-button onClick={props.resetError} type="button">
                     <RefreshIcon title="Reset Error" />
                   </button>
                 </div>
               </div>
               <Show when={props.errors[truncated() - 1]} keyed>
                 {current => (
-                  <div class="dev-overlay-content">
+                  <div data-start-dev-overlay-content>
                     <ErrorInfo error={current} />
                     <StackFrames error={current} isCompiled={isCompiled()} />
                   </div>
diff --git a/packages/start/src/shared/dev-overlay/get-source-map.ts b/packages/start/src/shared/dev-overlay/get-source-map.ts
index 0447a10d1..61d469e3c 100644
--- a/packages/start/src/shared/dev-overlay/get-source-map.ts
+++ b/packages/start/src/shared/dev-overlay/get-source-map.ts
@@ -1,4 +1,4 @@
-import { RawSourceMap, SourceMapConsumer } from "source-map-js";
+import { type RawSourceMap, SourceMapConsumer } from "source-map-js";
 
 const INLINE_SOURCEMAP_REGEX = /^data:application\/json[^,]+base64,/;
 const SOURCEMAP_REGEX =
diff --git a/packages/start/src/shared/dev-overlay/index.tsx b/packages/start/src/shared/dev-overlay/index.tsx
index e14e3c1c3..bb4dea670 100644
--- a/packages/start/src/shared/dev-overlay/index.tsx
+++ b/packages/start/src/shared/dev-overlay/index.tsx
@@ -1,15 +1,15 @@
 // @refresh skip
 import {
-  ErrorBoundary,
-  Show,
   createEffect,
   createSignal,
+  ErrorBoundary,
+  type JSX,
   onCleanup,
   resetErrorBoundaries,
-  type JSX,
+  Show,
 } from "solid-js";
-import { HttpStatusCode } from "../HttpStatusCode.ts";
 import clientOnly from "../clientOnly.ts";
+import { HttpStatusCode } from "../HttpStatusCode.ts";
 
 export interface DevOverlayProps {
   children?: JSX.Element;
diff --git a/packages/start/src/shared/dev-overlay/styles.css b/packages/start/src/shared/dev-overlay/styles.css
index 24a0e416d..ce51fdb95 100644
--- a/packages/start/src/shared/dev-overlay/styles.css
+++ b/packages/start/src/shared/dev-overlay/styles.css
@@ -1,11 +1,11 @@
-.dev-overlay {
+[data-start-dev-overlay] {
   position: fixed;
   inset: 0px;
   z-index: 50;
   overflow-y: auto;
 }
 
-.dev-overlay>div {
+[data-start-dev-overlay]>div {
   position: relative;
   display: flex;
   align-items: center;
@@ -13,13 +13,13 @@
   min-height: 100vh;
 }
 
-.dev-overlay-background {
+[data-start-dev-overlay-background] {
   position: absolute;
   inset: 0px;
   background-color: rgb(17 24 39 / 0.5);
 }
 
-.dev-overlay-panel {
+[data-start-dev-overlay-panel] {
   display: flex;
   flex-direction: column;
   width: 75vw;
@@ -30,12 +30,12 @@
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
 
-.dev-overlay-panel-container {
+[data-start-dev-overlay-panel-container] {
   margin: 2rem;
   z-index: 10;
 }
 
-.dev-overlay-navbar {
+[data-start-dev-overlay-navbar] {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -43,7 +43,7 @@
   gap: 0.5rem;
 }
 
-.dev-overlay-pagination {
+[data-start-dev-overlay-pagination] {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -54,7 +54,7 @@
   padding: 0.25rem;
 }
 
-.dev-overlay-button {
+[data-start-dev-overlay-button] {
   display: flex;
   padding: 0.125rem;
   border-radius: 9999px;
@@ -68,44 +68,44 @@
   transition-duration: 150ms;
 }
 
-.dev-overlay-button:hover {
+[data-start-dev-overlay-button]:hover {
   background-color: rgb(229 231 235);
   color: rgb(55 65 81);
 }
 
-.dev-overlay-button:focus {
+[data-start-dev-overlay-button]:focus {
   outline: 2px solid transparent;
   outline-offset: 2px
 }
 
-.dev-overlay-button:focus-visible {
+[data-start-dev-overlay-button]:focus-visible {
   box-shadow: 0 0 0 calc(3px) rgb(17 24 39 / 0.75);
 }
 
-.dev-overlay-button:active {
+[data-start-dev-overlay-button]:active {
   background-color: rgb(243 244 246);
   color: rgb(31 41 55);
 }
 
-.dev-overlay-button>svg {
+[data-start-dev-overlay-button]>svg {
   height: 1.5rem;
   width: 1.5rem;
 }
 
-.dev-overlay-page-counter {
+[data-start-dev-overlay-page-counter] {
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 600;
 }
 
-.dev-overlay-navbar-left {
+[data-start-dev-overlay-navbar-left] {
   display: flex;
   flex-direction: row;
   gap: 0.5rem;
 }
 
 
-.dev-overlay-controls {
+[data-start-dev-overlay-controls] {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -116,7 +116,7 @@
   padding: 0.25rem;
 }
 
-.dev-overlay-version {
+[data-start-dev-overlay-version] {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -130,17 +130,17 @@
   font-weight: 600;
 }
 
-.dev-overlay-version>div {
+[data-start-dev-overlay-version]>div {
   height: 1.5rem;
   width: 1.5rem;
 }
 
-.dev-overlay-version>div>svg {
+[data-start-dev-overlay-version]>div>svg {
   height: 1.5rem;
   width: 1.5rem;
 }
 
-.dev-overlay-content {
+[data-start-dev-overlay-content] {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
@@ -149,30 +149,30 @@
   padding: 1rem;
 }
 
-.dev-overlay-error-info {
+[data-start-dev-overlay-error-info] {
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
 }
 
-.dev-overlay-error-info-name {
+[data-start-dev-overlay-error-info-name] {
   font-weight: 700;
 }
 
-.dev-overlay-error-info-message {
+[data-start-dev-overlay-error-info-message] {
   font-size: 1.5rem;
   line-height: 2rem;
   color: rgb(239 68 68);
   font-weight: 700;
 }
 
-.dev-overlay-stack-frames-content {
+[data-start-dev-overlay-stack-frames-content] {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
 }
 
-.dev-overlay-stack-frames {
+[data-start-dev-overlay-stack-frames] {
   flex: 1 1 0%;
   display: flex;
   flex-direction: column;
@@ -185,7 +185,7 @@
   border-radius: 0.5rem;
 }
 
-.dev-overlay-stack-frame {
+[data-start-dev-overlay-stack-frame] {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -203,18 +203,18 @@
   outline: none;
 }
 
-.dev-overlay-stack-frame[tc-active],
-.dev-overlay-stack-frame[tc-selected],
-.dev-overlay-stack-frame:focus {
+[data-start-dev-overlay-stack-frame][tc-active],
+[data-start-dev-overlay-stack-frame][tc-selected],
+[data-start-dev-overlay-stack-frame]:focus {
   background-color: rgb(219 234 254);
   color: rgb(30 58 138);
 }
 
-.dev-overlay-stack-frame-function {
+[data-start-dev-overlay-stack-frame-function] {
   font-weight: 700;
 }
 
-.dev-overlay-stack-frame-file {
+[data-start-dev-overlay-stack-frame-file] {
   white-space: nowrap;
   font-size: 0.75rem;
   /* 12px */
@@ -222,7 +222,7 @@
   /* 16px */
 }
 
-.dev-overlay-stack-frames-code {
+[data-start-dev-overlay-stack-frames-code] {
   padding: 0.5rem 1rem;
   gap: 0.25rem;
   flex: 1 1 0%;
@@ -234,7 +234,7 @@
   background-color: rgb(17 24 39);
 }
 
-.dev-overlay-stack-frames-code-fallback {
+[data-start-dev-overlay-stack-frames-code-fallback] {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -244,13 +244,13 @@
   line-height: 1.25rem;
 }
 
-.dev-overlay-stack-frames-code-source {
+[data-start-dev-overlay-stack-frames-code-source] {
   font-size: 0.875rem;
   line-height: 1.25rem;
   color: rgb(249 250 251);
 }
 
-.dev-overlay-stack-frames-code-container {
+[data-start-dev-overlay-stack-frames-code-container] {
   width: 100%;
   overflow: hidden;
   min-width: 100%;
@@ -260,13 +260,13 @@
   border-top-color: rgb(249 250 251);
 }
 
-.dev-overlay-code-view {
+[data-start-dev-overlay-code-view] {
   overflow: auto;
   min-width: 100%;
   min-height: 16rem;
 }
 
-.dev-overlay-code-view>.shiki {
+[data-start-dev-overlay-code-view]>.shiki {
   float: left;
   min-width: 100%;
   overflow-x: auto;
@@ -277,7 +277,7 @@
   background-color: transparent !important;
 }
 
-.dev-overlay-code-view>.shiki .line::before {
+[data-start-dev-overlay-code-view]>.shiki .line::before {
   content: counter(step);
   counter-increment: step;
   width: 1rem;
@@ -287,6 +287,6 @@
   color: rgba(115, 138, 148, .4)
 }
 
-.dev-overlay-error-line {
+[data-start-dev-overlay-error-line] {
   background-color: rgba(239, 68, 68, .4);
-}
\ No newline at end of file
+}