Scoped CSS properties overridden when multiple instances of same component

[giovannibaldi]

I'm using JavaScript to generate scoped CSS based on props passed to the component.

For example, inside of _components/flex-box.webc:

<script webc:type="js" webc:is="style" webc:scoped>
` 
:host {
  display: flex;
  flex-direction: ${direction};
}
`
</script>

The problem is when multiple instances of the same component are on the same page.
Sharing the same CSS class, only the last styles apply.

For example, inside of index.webc:

<flex-box @direction="row"></flex-box>
<flex-box @direction="column"></flex-box>

flex-direction: column; would override flex-direction: row;, assigning the same property to both elements.