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:

vscode-native-treeview.mov

Idea:

goal-jsfiddle.mov

VSCodeTree:

vscode-tree-item-action-bar.mov

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 #550