[card] allow user-defined media elements for cover-media or stretch-media themes

[christophe-g]

Describe your motivation

Thanks a lot for the (upcoming) card component.

For the time being, only certain elements are allowed (in the sense of working) in the media slot element:
img, video, svg, vaadin-icon.

However, it is likely that consumer of the card component might place other content there and want them displayed as a cover-image. For instance, I am displaying interactive charts web-components.

Describe the solution you'd like

I wish to have more flexibility in the type of content allowed in the media slot.

One convention could be to authorize any element with a .media class.

Describe alternatives you've considered

I am overriding the card element with additional css (.media), like;

      :host(:not([theme~='horizontal'])) ::slotted([slot='media']:is(img, video, svg, .media)) {
        max-width: 100%;
      }

 ...

Additional context

No response

[yuriy-fix]

The media slot is not intended for interactive components, content slot is designed to be used for that purpose.
Keeping the ticket opened as an enhancement request.

[christophe-g]

Thanks for keeping this opened @yuriy-fix

This is to clarify my use-case: