Add `part` attributes to inner elements to allow custom styling via ::part selector

[sovietspaceship]

See https://developer.mozilla.org/en-US/docs/Web/CSS/::part.

My use case is being able to apply custom styling from outside a component.

This would enable stuff like:

vscode-textarea::part(textarea) {
  border-color: blue !important;
}

The implementation would look something like:

render(): TemplateResult {
    return html`
      ...
      <textarea
        autocomplete=${ifDefined(this.autocomplete)}
        part="textarea"

The reason ::part is required is that these examples won't work:

textarea {
  border-color: blue !important;
}

vscode-textarea textarea {
  border-color: blue !important;
}

including a potential solution to allow passing custom classes

class=${classMap({
    monospace: this.monospace,
    ...this.classes

due to textarea living within the vscode-textarea shadow DOM.

I'd create a PR myself, but as this requires updating several components as well as the documentation I'd like to know your opinion on this before committing to it.

[bendera]

Hi,

Customization options are intentionally excluded from the project, as the goal is to adapt to the VSCode UI rather than offer flexible customizability. What I recommend is stylizing a native textarea like this: https://github.com/vscode-elements/elements-lite/blob/main/lib/components/textfield/textfield.css That's why I created the Elements Lite project. (It's not complete, textarea is not ready yet.) Honestly, does a textarea web component provide any added value?

[bendera]

Meanwhile the textarea css has been done. https://github.com/vscode-elements/elements-lite/tree/main/lib/components/textarea