--- name: vscode-elements-webviews description: Integrate @vscode-elements/elements controls into Lit webviews. Use when adding or changing VSCode Elements selects, text fields, checkboxes, buttons, form association, controlled values, accessibility state, or VS Code theme styling. review: never --- # VSCode Elements in Lit webviews Wrapper component = adapter between application state and the VSCode Elements public API. ## Imports and controlled state - Concrete module imports: `@vscode-elements/elements/dist//index.js`. Class import when narrowing `currentTarget`; side-effect import when only registration is needed. - Controlled state through public `.value`, `.checked`, `.invalid`, and `?disabled` properties. - `change`, `input`, and `click` events translated to schema-backed application actions; `currentTarget` narrowed with the concrete element class. - Slotted option changes clearing a select's pending value: await nested `updateComplete` in `updated()`, then reapply the controlled value. - No private control fields. ## Form association VSCode Elements inputs use `ElementInternals`; a child Lit shadow root can block discovery of a parent-rendered form. - Outer-form participation required: `createRenderRoot()` returns `this`, with rationale comment. - Otherwise: normal shadow DOM. Light DOM is a targeted interop choice, not a component default. - Real-browser assertion for the resulting `control.form` relationship. ## Accessibility - Host-supplied localized labels; semantic `