Nested styles in recursive components issue

Hello there,

we are currently running into a styling issue when using cyclic components. The component is structured as follows:

<div
  :class="{
    'hello-world': true,
    'hello-world--red-border': redBorder,
    'hello-world--green-border': greenBorder,
  }"
>
  <h2 class="hello-world__title">{{ title }}</h2>
  <div class="hello-world__content">
    <slot />
  </div>
</div>

With the following scoped style:

.hello-world__content {
  border: 1px dotted blue;
}

.hello-world--red-border .hello-world__content {
  border: 1px dotted red;
}

.hello-world--green-border .hello-world__content {
  border: 1px dotted green;
}

The issue here is, if two or more of these components are nested inside each others slots, and the root component has the “red-border” modificator, the red border styles also gets applied to all child elements.

This is because the CSS rule generated from .hello-world--red-border .hello-world__content is .hello-world--red-border .hello-world__content[data-v-1234], which just checks if there is any class with the red border as a parent, and not if the DOM element with the class on it was created by this component.

There are several workarounds which requires to either change the DOM elements the classes are set on (which can mean a lot of duplicated classes in the DOM) or to use a CSS direct child selector (> which is prone to breaking if the DOM tree changes due to forgetting to change the CSS).

The following code sandbox contains a reproduction of the issue:

Is there any specific way to do this without changing our CSS selectors/DOM structure?

Thank you for your time!