web component variations

As far as i can tell, there is no recommended, established way in web components to do variations, or at least, not where they talk about it as such that i can find by searching the web.

What i want is basically a way to apply classes, or even, if feasible, to have the parts of the web component assembled slightly differently

  <image>Image URL defined here</image>
  <textbox>Text goes here.</textbox>
  <variation>Accepts 'left' or 'right'</variation>

Which would produce something like:

<div background-image='image url'>
  <div class='left'>
    Text goes here.

Based on the <awesome-explosion size="big" color="blue"> example this totally works!

From https://www.youtube.com/watch?v=zq8pt4dyDiw


More web components / HAX questions: