bug: Parent components styles taking precedence when using scoped CSS

[OFurnell]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Stencil Version

4.21.0

Current Behavior

When using scoped CSS, a child component will pick up any matching styles from parent components with a higher precedence than its own.

Expected Behavior

Styles defined using scoped CSS should be uniquely scoped to the component. Versions 4.20.0 and below do not seem to have the same behaviour with scoped CSS.

System Info

System: node 22.9.0
    Platform: windows (10.0.26100)
       Build: 1724698030
     Stencil: 4.21.0
  TypeScript: 5.5.3
      Rollup: 2.56.3
      Parse5: 7.1.2
      jQuery: 4.0.0-pre
      Terser: 5.31.1

Steps to Reproduce

Create a component with a with a scoped CSS style:

@Component({
  tag: 'child-component',
  styles: '.styled { color: green }',
  shadow: false,
  scoped: true
})
export class ChildComponent {
  render() {
    return <div class="styled">Child element</div>;
  }
}

Define a parent component with a matching CSS style that imports the first component:

@Component({
  tag: 'parent-component',
  styles: '.styled { color: red }',
  shadow: false,
  scoped: true
})
export class ParentComponent {
  render() {
    return <div>
      <div class="styled">Parent element</div>
      <child-component></child-component>
    </div>;
  }
}

In the example above, v4.20.0 renders two strings, one in red then one in green but v4.21.0 will render both strings in red.

Code Reproduction URL

https://github.com/OFurnell/stencil-scoped-style-issue

Additional Information

No response