Scoped CSS properties overridden when multiple instances of same component

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.

Start with _components/flex-box.webc and index.webc, then inspect how webc:is="style" with webc:scoped is processed when the same component appears more than once. Reproduce the two directions shown in the issue and compare the generated styles. Done means each flex-box instance retains its own prop-specific flex-direction.