sketch: remove shadowDOM dependency from tool card components
Replace shadowDOM-based slot system with property-based composition in all
sketch-tool-card-[TOOL_NAME] components to support shadowDOM-free architecture.
Problem Analysis:
- sketch-tool-card component relied on HTML5 template slots which require shadowDOM
- 13 tool card components used sketch-tool-card as composition base via slots
- shadowDOM dependency blocked broader effort to reduce shadowDOM usage
- Need to preserve all existing functionality while removing slot dependency
Solution Implementation:
- Created sketch-tool-card-base component with property-based content injection
- Replaced slot system with summaryContent, inputContent, resultContent properties
- Maintained all existing styling, behavior, and expand/collapse functionality
- Migrated all 13 existing tool card components to use new base component
Components Migrated:
- sketch-tool-card-about-sketch
- sketch-tool-card-browser-clear-console-logs
- sketch-tool-card-browser-click
- sketch-tool-card-browser-eval
- sketch-tool-card-browser-get-text
- sketch-tool-card-browser-navigate
- sketch-tool-card-browser-recent-console-logs
- sketch-tool-card-browser-resize
- sketch-tool-card-browser-scroll-into-view
- sketch-tool-card-browser-type
- sketch-tool-card-browser-wait-for
- sketch-tool-card-read-image
- sketch-tool-card-take-screenshot
Migration Pattern:
- Changed from: <slot name="summary">content</slot>
- Changed to: .summaryContent=html content
- Preserved all component-specific styling and logic
- Maintained existing API surface for parent components
Architecture Benefits:
- Removes shadowDOM requirement from 13+ components
- Enables future shadowDOM-free component development
- Maintains backward compatibility during migration
- Preserves all existing tool card functionality
Files Added:
- sketch/webui/src/web-components/sketch-tool-card-base.ts (new shadowDOM-free base)
Files Modified:
- All 13 sketch-tool-card-[TOOL_NAME].ts components migrated to use new base
Verification:
- TypeScript compilation passes without errors
- Demo pages render correctly with consistent styling
- Expand/collapse behavior preserved across all tool types
Co-Authored-By: sketch <hello@sketch.dev>
Change-ID: sa3288c1d986356e5k
diff --git a/webui/src/web-components/DEAR_LLM.md b/webui/src/web-components/DEAR_LLM.md
index 5edac6d..f3b6249 100644
--- a/webui/src/web-components/DEAR_LLM.md
+++ b/webui/src/web-components/DEAR_LLM.md
@@ -1,3 +1,78 @@
+# Modern Component Architecture: SketchTailwindElement
+
+**IMPORTANT: New component architecture standards for all Sketch web components**
+
+## New Component Standard (Use This)
+
+All new Sketch web components should:
+
+1. **Inherit from `SketchTailwindElement`** instead of `LitElement`
+2. **Use Tailwind CSS classes** for styling instead of CSS-in-JS
+3. **Use property-based composition** instead of slot-based composition
+4. **Avoid Shadow DOM** whenever possible
+
+### Example of Modern Component:
+
+```typescript
+import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { SketchTailwindElement } from "./sketch-tailwind-element";
+import "./sketch-tool-card-base";
+
+@customElement("sketch-tool-card-example")
+export class SketchToolCardExample extends SketchTailwindElement {
+ @property() toolCall: ToolCall;
+ @property() open: boolean;
+
+ render() {
+ const summaryContent = html`<span class="font-mono text-sm text-gray-700">
+ ${this.toolCall?.name}
+ </span>`;
+
+ const inputContent = html`<div class="p-2 bg-gray-100 rounded">
+ <pre class="whitespace-pre-wrap break-words">${this.toolCall?.input}</pre>
+ </div>`;
+
+ return html`<sketch-tool-card-base
+ .open=${this.open}
+ .toolCall=${this.toolCall}
+ .summaryContent=${summaryContent}
+ .inputContent=${inputContent}
+ ></sketch-tool-card-base>`;
+ }
+}
+```
+
+### Key Differences from Legacy Components:
+
+- **Extends SketchTailwindElement** (not LitElement)
+- **Uses sketch-tool-card-base** with property binding (not slots)
+- **Tailwind classes** like `font-mono text-sm text-gray-700` (not CSS-in-JS)
+- **No static styles** or Shadow DOM
+- **Property-based composition** (`.summaryContent=${html\`...\`}`)
+
+## Legacy Components (Do NOT Use as Examples)
+
+Some existing components still use the old architecture and will be migrated:
+
+- Components that extend `LitElement` directly
+- Components that use `static styles = css\`...\``
+- Components that use slot-based composition (`<slot name="summary"></slot>`)
+- Components that rely on Shadow DOM
+
+**Do not use these legacy patterns for new components.** They are being phased out.
+
+## Migration Status
+
+As of the latest migration:
+
+- ✅ All tool card components now use SketchTailwindElement
+- ✅ Complete Shadow DOM elimination in tool card hierarchy
+- ✅ Consistent Tailwind CSS styling approach
+- 🔄 Other components will be migrated over time
+
+---
+
# Component Architecture: sketch-tool-card and Related Components
This document explains the relationship between LitElement subclasses in webui/src/web-components/ and the sketch-tool-card custom element, focusing on their containment relationship and CSS styling effects.