commit f6e1dfe8ea4069d9180abf71c64b9d5ff4b172e0
author Sean McCullough <banksean@gmail.com> Thu Jul 03 14:59:40 2025 -0700
committer Autoformatter <bot@sketch.dev> Thu Jul 03 22:00:37 2025 +0000
tree eb57c7c5e3c9e1fee2fd3c781597c2f50730c25c
parent e1c8b7bedc96d182916d5e1b9a07913945ffbafb

webui rm shadowRoot references

webui/src/web-components/sketch-diff2-view.ts

diff --git a/webui/src/web-components/sketch-diff2-view.ts b/webui/src/web-components/sketch-diff2-view.ts
index fb8ed31..d2a8fbb 100644
--- a/webui/src/web-components/sketch-diff2-view.ts
+++ b/webui/src/web-components/sketch-diff2-view.ts
@@ -104,7 +104,7 @@
       const { path, content } = event.detail;
 
       // Get Monaco view component
-      const monacoView = this.shadowRoot?.querySelector("sketch-monaco-view");
+      const monacoView = this.querySelector("sketch-monaco-view");
       if (!monacoView) {
         console.error("Monaco view not found");
         return;
@@ -288,7 +288,7 @@
     this.fileExpandStates.set(filePath, newState);
 
     // Apply to the specific Monaco view component for this file
-    const monacoView = this.shadowRoot?.querySelector(
+    const monacoView = this.querySelector(
       `sketch-monaco-view[data-file-path="${filePath}"]`,
     );
     if (monacoView) {
@@ -856,9 +856,7 @@
    */
   refreshDiffView() {
     // First refresh the range picker to get updated branch information
-    const rangePicker = this.shadowRoot?.querySelector(
-      "sketch-diff-range-picker",
-    );
+    const rangePicker = this.querySelector("sketch-diff-range-picker");
     if (rangePicker) {
       (rangePicker as any).loadCommits();
     }

webui/src/web-components/sketch-timeline-message.ts

diff --git a/webui/src/web-components/sketch-timeline-message.ts b/webui/src/web-components/sketch-timeline-message.ts
index 26246b2..a56911a 100644
--- a/webui/src/web-components/sketch-timeline-message.ts
+++ b/webui/src/web-components/sketch-timeline-message.ts
@@ -395,7 +395,7 @@
     // Add a small delay to ensure the DOM is fully rendered
     setTimeout(async () => {
       // Find all mermaid containers in our shadow root
-      const containers = this.shadowRoot?.querySelectorAll(".mermaid");
+      const containers = this.querySelectorAll(".mermaid");
       if (!containers || containers.length === 0) return;
 
       try {
@@ -453,8 +453,7 @@
   setupCodeBlockCopyButtons() {
     setTimeout(() => {
       // Find all copy buttons in code blocks
-      const copyButtons =
-        this.shadowRoot?.querySelectorAll(".code-copy-button");
+      const copyButtons = this.querySelectorAll(".code-copy-button");
       if (!copyButtons || copyButtons.length === 0) return;
 
       // Add click event listener to each button
@@ -464,7 +463,7 @@
           const codeId = (button as HTMLElement).dataset.codeId;
           if (!codeId) return;
 
-          const codeElement = this.shadowRoot?.querySelector(`#${codeId}`);
+          const codeElement = this.querySelector(`#${codeId}`);
           if (!codeElement) return;
 
           const codeText = codeElement.textContent || "";