web component variations

Tue, Mar 19, 2019

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

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

Which would produce something like:

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

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

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

Yay!

---

More web components / HAX questions:

• Using a web component for dynamic content, such as a list of content when given a taxonomy term. Is this discouraged? Encouraged?