diff --git a/source/assets/js/playground.ts b/source/assets/js/playground.ts
index dc6dcf7..2a072a8 100644
--- a/source/assets/js/playground.ts
+++ b/source/assets/js/playground.ts
@@ -56,13 +56,13 @@ function setupPlayground() {
         }
       }),
     ],
-    parent: document.getElementById('editor') || document.body,
+    parent: document.querySelector('.sl-code-is-precompiled') || undefined,
   });
 
   // Setup CSS view
   const viewer = new EditorView({
     extensions: [...outputSetup],
-    parent: document.getElementById('css-view') || document.body,
+    parent: document.querySelector('.sl-code-is-compiled') || undefined,
   });
 
   // Apply initial state to dom
@@ -163,7 +163,9 @@ function setupPlayground() {
    * so the output is collected through the compilation and the display updated just once.
    */
   function updateDebugOutput() {
-    const console = document.querySelector('.console') as HTMLDivElement;
+    const console = document.querySelector(
+      '.sl-c-playground__console',
+    ) as HTMLDivElement;
     console.innerHTML = playgroundState.debugOutput
       .map(displayForConsoleLog)
       .join('\n');
diff --git a/source/assets/sass/components/_playground.scss b/source/assets/sass/components/_playground.scss
index b7c708c..8d47563 100644
--- a/source/assets/sass/components/_playground.scss
+++ b/source/assets/sass/components/_playground.scss
@@ -159,13 +159,13 @@
       outline: 0;
     }
   }
+
+  .sl-code-is-precompiled & {
+    cursor: text;
+  }
 }
 
-#editor {
-  cursor: text;
-}
-
-.console {
+.sl-c-playground__console {
   font-family: typography.$sl-font-family--code;
   max-height: 500px;
   margin: 0;
@@ -174,8 +174,7 @@
   .console-line {
     display: grid;
     gap: var(--sl-gutter);
-    grid-template:
-      'location message' auto / 10ch 1fr;
+    grid-template: 'location message' auto / 10ch 1fr;
   }
 
   .console-message {
@@ -219,7 +218,7 @@
   }
 }
 
-#code-editor-error-alert {
+.sl-c-playground__error {
   display: none;
   font-weight: typography.$sl-font-weight--bold;
 
diff --git a/source/playground.liquid b/source/playground.liquid
index 2d9aef1..2343dfc 100644
--- a/source/playground.liquid
+++ b/source/playground.liquid
@@ -22,7 +22,7 @@ is_playground: true
         class="sl-c-button sl-c-button--tab"
         data-setting="inputFormat">Sass</button>
     </div>
-    <div id="editor"></div>
+    <div class="sl-code-is-precompiled"></div>
   </div>
   <div class="sl-c-playground__code-editor-wrapper" data-code="compiled">
     <div class="sl-c-playground__editor-tabbar" data-setting="outputFormat">
@@ -45,8 +45,8 @@ is_playground: true
         (Compiled)
       </span>
     </div>
-    <div id="code-editor-error-alert" class="sl-c-callout sl-c-callout--warning">Please resolve error to view compiled CSS.</div>
-    <div id="css-view" class="sl-code-is-compiled"></div>
+    <div class="sl-c-callout sl-c-callout--warning sl-c-playground__error">Please resolve error to view compiled CSS.</div>
+    <div class="sl-code-is-compiled"></div>
   </div>
   <div class="sl-c-playground__console-wrapper">
     <div class="sl-c-playground__editor-tabbar">
@@ -54,7 +54,7 @@ is_playground: true
         Console
       </span>
     </div>
-    <pre class="console"></pre>
+    <pre class="sl-c-playground__console"></pre>
   </div>
 </div>