vscode tree styling limitations

[dankeboy36]

Hello, I tried to recreate the native VS Code’s tree row layout with a VSCodeTree in a webview: a label with a counter and right-aligned action icons that appear on hover. It works fine with plain HTML and flexbox, but once the markup is placed inside <vscode-tree-item>, everything breaks because of the shadow DOM.

Native VS Code:

https://github.com/user-attachments/assets/afb187d8-ee85-4aa8-a974-ac1e50881d67

Idea:

https://github.com/user-attachments/assets/ea7569a5-2d30-40fe-b9ff-f8c06f9429de

VSCodeTree:

https://github.com/user-attachments/assets/4e0b9415-de3e-4468-afff-019289d129db

What I Tried

1. Rich content slot
   I placed the layout in the default slot using the “rich content” sample (icon + label + badge). It renders, but:

   • Hover only works directly over the slotted text, not across the full row.
   • The internal .wrapper defines the clickable area and background, and I can’t style it.

2. CSS selectors
   Rules like .tree-node:hover or .vscode-tree-item:hover don’t reach inside the shadow DOM. Only the content and children parts are exposed, nothing for .wrapper or .icon-container.

3. Hover for actions
   Because hover lands on the host wrapper, .tree-node:hover .action-bar only fires over text. The rest of the row never triggers it.

I could not achieve right-aligned actions, hover backgrounds, or row-wide effects with <vscode-tree-item>. The shadow DOM hides key elements and blocks styling.

Feature Request

Please expose more parts (like part="wrapper" and part="actions") or CSS variables so extension authors can:

• Style the full row background and hover state
• Align custom actions to the right
• React to hover across the whole row, not just over the text

Thank you!

---

Same as https://github.com/vscode-elements/elements/issues/550