svelte
svelte copied to clipboard
SVG and `:not` interaction cause .svelte-id class to not be applied
Describe the bug
CSS rules with :not are not being applied to elements inside of an SVG.
circle:not(.class-name) { /* Is not applied */ }
As a workaround, adding this to the style block causes things to work as expected:
circle { /* Doesn't even have to contain rules */ }
Reproduction
https://svelte.dev/playground/9c763c4f9c654cff8d427003e30c632f?version=5.1.9
Logs
No response
System Info
System:
OS: Windows 11 10.0.22631
CPU: (20) x64 13th Gen Intel(R) Core(TM) i5-13600KF
Memory: 41.13 GB / 63.85 GB
Binaries:
Node: 20.9.0 - C:\Program Files\nodejs\node.EXE
npm: 10.1.0 - C:\Program Files\nodejs\npm.CMD
pnpm: 8.11.0 - ~\AppData\Local\pnpm\pnpm.CMD
Browsers:
Edge: Chromium (127.0.2651.74)
Internet Explorer: 11.0.22621.3527
npmPackages:
svelte: ^5.0.5 => 5.0.5
Severity
annoyance
https://svelte.dev/playground/9c763c4f9c654cff8d427003e30c632f?version=5.1.10 This looks fixed in 5.1.1.0.