diff --git a/src/compiler/compile/css/Selector.ts b/src/compiler/compile/css/Selector.ts
index d18a7e7ba6..c45cda57e9 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 0000000000..20543c5c8e
--- /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 0000000000..f8cb70eff7
--- /dev/null
+++ b/test/css/samples/attribute-selector-details-open/input.svelte
@@ -0,0 +1,7 @@
+Hello
+
+