[upload] Extract file list to separate component and place it in light DOM

[web-padawan]

Describe your motivation

Currently, vaadin-upload renders the file list using the corresponding <slot name="file-list"> fallback content. The current implementation has the following implications that might worth addressing:

Styling

In order to support ::part() for styling, we have to use exportparts for all of the parts from vaadin-upload-file. This would result in quite a long list of parts to be applied to vaadin-upload, which might be rather confusing.

Custom file list

While custom file list is technically supported, using it requires binding files array manually. This was not a problem back in the day when this feature was added in https://github.com/vaadin/vaadin-upload/pull/77, we just used Polymer two-way bindings magic 🧙

However, if we want to support custom file list in Flow as requested in https://github.com/vaadin/flow-components/issues/1570, we should change that to allow placing component that accepts items property (some users might want to use vaadin-grid).

Describe the solution you'd like

1. Create a new component e.g. vaadin-upload-file-list that would render vaadin-upload-file components.
2. Use SlotMixin or SlotController to initialize this component in the light DOM instead of fallback content
3. Optionally: consider using light DOM also for vaadin-upload-file elements to make their styling easier

Note: we should also preserve the <ul> and <li> elements added in the following PRs:

• #2316
• #3068

Additional context

Related issues:

• https://github.com/vaadin/flow-components/issues/1570
• #4281
• #1242
• https://github.com/vaadin/vaadin-upload/pull/227

[yuriy-fix]

Let's split the task into two parts:

• the theming changes
• supporting custom file list