Looks like this is just inheriting style ('color' property) from the shadow host (in this case, <test-element>)
to its shadow root.
Can be applied to the shadow host element (<test-element>) as * matches any element.
Then any element under the shadow root also inherit the property.
Please try
.on * {
border: 1px solid red;
}
instead of 'color' property. 'border' property doesn't inherit.
Each element under '.on' class will have red border, thus you should see
red border around <test-element>, but you should not see borders in
each element under the shadow root.