Style scope leaks into child components.

[jon-lehman]

Describe the bug

Nested components wrapped in styled divs are receiving leaked styling from upstream. Is this intentional? My expectation was that style scopes are completely contained within each individual component, unless something like :global() is used. This expectation is based on The docs mentioning: "CSS inside a <style> block will be scoped to that component." Similarly, the tutorial mentions: "Notice that even though Nested.svelte has a <p> element, the styles from App.svelte don't leak in."

My apologies if this is intended behavior and not a bug. I've read through several other reported/closed issues and PRs including, #583, #570, PR#607. I've also read through some relevant conversations on Twitter from the official sveltejs account. I guess I am just a bit confused on current expected behavior and where things landed over the years.

Reproduction

https://svelte.dev/repl/e195434953064108b0bd6b672f13d279?version=3.44.2

Should be pretty self explanatory, my expectation would be that the nested component "Text.svelte" would inherit the default black styling rather than the parent component's ".wrapped" class styling.

Logs

No response

System Info

I've tried on several setups, most prominently the online svelte REPL. However, below is my output:

 System:
    OS: Windows 10 10.0.22000
    CPU: (12) x64 AMD Ryzen 5 3600 6-Core Processor
    Memory: 24.54 GB / 31.91 GB
  Binaries:
    Node: 14.15.0 - E:\Programs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 7.19.1 - E:\Programs\npm.CMD
  Browsers:
    Chrome: 96.0.4664.45
    Edge: Spartan (44.22000.120.0), Chromium (95.0.1020.53)
    Internet Explorer: 11.0.22000.120
  npmPackages:
    svelte: ^3.42.6 => 3.44.2

Severity

annoyance

[Conduitry]

What's meant is that the selectors in the CSS in a component's <style> block are scoped to that component. Any CSS property values will still affect child elements (unless it's been overridden by something else), just as in normal CSS.

In the tutorial, the child component's <p> element is not contained in an element that has been styled as purple, so it is not purple. In your REPL, the child component's <p> element is inside a <div> that has been styled as red, so it is red.