[Feature Request] Allow override for Skeleton 'content' component element type

[ampossardt]

Is your feature request related to a problem? Please describe.

When using the Skeleton component, there are scenarios where the structure of the HTML doesn't lend itself to wrapping the 'content' of skeleton in a div. Ex:

<ul>
  <Skeleton as="li" className="...">Item one</Skeleton>
  <Skeleton as="li"  className="...">Item two</Skeleton>
  <Skeleton as="li"  className="...">Item three</Skeleton>
</ul>

In this scenario, the top-level element is rendered as an li, but the inner content of the item is wrapped in a div, which isn't valid HTML. It would be nice to be able to control what element is rendered for the inner wrapper.

Describe the solution you'd like

I would expect there to be an additional prop to provide an element type similar to the as prop:

<ul>
  <Skeleton as="li" contentAs="p">
     My content
  </Skeleton>
</ul>

Describe alternatives you've considered

Using classNames is fine for styling the inner wrapper, but to be semantically correct in this scenario, divs aren't valid descendents of an li tag so it would be preferrable to keep the HTML valid, and also reduce the number of tags that need to be rendered.

Screenshots or Videos

No response

[linear[bot]]

ENG-1099 [Feature Request] Allow override for Skeleton 'content' component element type