diff --git a/CHANGELOG.md b/CHANGELOG.md index 8ed9b5a3c28..ad338405277 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,7 @@ * Support `use:obj.method` as actions ([#3935](https://github.com/sveltejs/svelte/issues/3935)) * Support `_` as numeric separator ([#5407](https://github.com/sveltejs/svelte/issues/5407)) * Fix assignments to properties on store values ([#5412](https://github.com/sveltejs/svelte/issues/5412)) +* Add special style scoping handling of `[open]` selectors on `
` elements ([#5421](https://github.com/sveltejs/svelte/issues/5421)) * Support `import.meta` in template expressions ([#5422](https://github.com/sveltejs/svelte/issues/5422)) ## 3.25.1 diff --git a/src/compiler/compile/css/Selector.ts b/src/compiler/compile/css/Selector.ts index d18a7e7ba62..c45cda57e96 100644 --- a/src/compiler/compile/css/Selector.ts +++ b/src/compiler/compile/css/Selector.ts @@ -11,6 +11,10 @@ enum BlockAppliesToNode { UnknownSelectorType } +const whitelist_attribute_selector = new Map([ + ['details', new Set(['open'])] +]); + export default class Selector { node: CssNode; stylesheet: Stylesheet; @@ -232,7 +236,11 @@ function block_might_apply_to_node(block: Block, node: Element): BlockAppliesToN } else if (selector.type === 'AttributeSelector') { - if (!attribute_matches(node, selector.name.name, selector.value && unquote(selector.value), selector.matcher, selector.flags)) return BlockAppliesToNode.NotPossible; + if ( + !(whitelist_attribute_selector.has(node.name.toLowerCase()) && whitelist_attribute_selector.get(node.name.toLowerCase()).has(selector.name.name.toLowerCase())) && + !attribute_matches(node, selector.name.name, selector.value && unquote(selector.value), selector.matcher, selector.flags)) { + return BlockAppliesToNode.NotPossible; + } } else if (selector.type === 'TypeSelector') { diff --git a/test/css/samples/attribute-selector-details-open/expected.css b/test/css/samples/attribute-selector-details-open/expected.css new file mode 100644 index 00000000000..20543c5c8e0 --- /dev/null +++ b/test/css/samples/attribute-selector-details-open/expected.css @@ -0,0 +1 @@ +details[open].svelte-xyz{color:red} \ No newline at end of file diff --git a/test/css/samples/attribute-selector-details-open/input.svelte b/test/css/samples/attribute-selector-details-open/input.svelte new file mode 100644 index 00000000000..f8cb70eff7d --- /dev/null +++ b/test/css/samples/attribute-selector-details-open/input.svelte @@ -0,0 +1,7 @@ +
Hello
+ +