:dir(rtl) selector does not match correctly in shadow DOM
Categories
(Core :: DOM: Core & HTML, defect)
Tracking
()
People
(Reporter: gullerya, Unassigned)
References
(Blocks 1 open bug)
Details
Attachments
(1 file)
|
65.33 KB,
image/png
|
Details |
dev tool screenshot - rtl bug.png
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36
Steps to reproduce:
Defined custom element.
Added to its shadow root (open) DIV element with class 'label'.
Added to its shadow root styles as below:
:host(:dir(ltr)) .subtitle {
transform-origin: center left;
}
:host(:dir(rtl)) .subtitle {
transform-origin: center right;
}
Created and appended the element to the document.
Actual results:
When the document is in the 'ltr' mode - the first CSS rule applied correctly.
When the document is in the 'rtl' mode - instead of the second rule, still again the first rule is getting applied (despite that i'm clearly see in the dev tools, that all of the elements inherited from body the 'rtl' direction).
Expected results:
In the 'rtl' mode the second CSS rule should have been applied.
|
||
Updated•5 years ago
|
|
||
Comment 1•5 years ago
|
||
Do you have a test-case? Does it work on Nightly? I think this should've been fixed in bug 1562425.
|
Reporter | |
Comment 2•5 years ago
|
||
I've just downloaded and tried it on Nightly build - it is the same, I mean the defect is reproducible there as well.
The test case is described in the defect description above, also please see the screenshot of the dev tools, where you can clearly see that although the direction: rtl is inherited from parent, the actual css rule matched and effective is :host(:dir(ltr)).
Please notify me if anything is still missing to reproduce on your local env and thanks for taking care!
(BTW, if the :host-context css rule would be landing shortly, I think that the priority of the :dir might be lowered, since most of the cases could be solved with the former one and its closer to be getting standardized than the :dir).
|
|
||
Comment 3•5 years ago
|
||
A standalone html testcase would be best to ensure we're all on the same page.
I don't know what the "document being in rtl mode" means, but from your screenshot it seems to be a class on the body that sets direction: rtl?
If so, it is expected that it's not working, and you don't need shadow dom to see it happen. :dir doesn't work on the final computed direction, but on the DOM directionality. There's no way to make that work as you could trivially write :dir(rtl) { direction: ltr } .
The right way to change directionality in a way that affects the document is using the dir attribute. That is, instead of (or on top of) <body class=rtl> you should write <body dir=rtl>. That affects the matching result of :dir().
But if you're doing that then there's something unexpected, but a testcase would be needed to dig further.
|
|
Reporter | |
Comment 4•5 years ago
|
||
I've indeed expected that the pseudo rule is working on computed styling, my bad.
Turning the setup into body's attribute flavor made things as expected.
My bad, no defect here and the issue mach be closed.
Thank you very much!
|
|
Reporter | |
Updated•5 years ago
|
Description
•