polyfills icon indicating copy to clipboard operation
polyfills copied to clipboard

Published 20 hours ago • verified publisher icon webcomponents

ShadyCSS transforms `:dir(rtl)` to `[dir="rtl"]`, but these are not equivalent.

Open Caffeinix opened this issue 5 years ago • 3 comments

Description

Selectors of the form:

:host(:dir(rtl))

are transformed to, e.g.,

:host([dir="rtl"])

But, as MDN puts it:

Be aware that the behavior of the :dir() pseudo-class is not equivalent to the [dir=…] attribute selectors. The latter match the HTML dir attribute, and ignore elements that lack it — even if they inherit a direction from their parent. (Similarly, [dir=rtl] and [dir=ltr] won't match the auto value.) In contrast, :dir() will match the value calculated by the user agent, even if inherited.

So this transformation will break this selector for any element that does not have a dir attribute explicitly specified on it. At first I thought perhaps ShadyCSS was automatically adding the dir attribute, but I see no evidence of that either in the code (polyfills/packages/shadycss/src/style-transformer.js) or in the observed behavior.

Expected behavior

Using this selector on an element that inherits its dir from higher up the DOM should still result in a match if the inherited dir matches the one(s) specified.

Actual behavior

Using this selector on an element that inherits its dir from higher up the DOM causes the transformed version of the selector not to match, even though the untransformed version would match in browsers where it is supported.

Version

HEAD

Browsers affected

  • [X] Chrome
  • [X] Firefox
  • [X] Edge
  • [X] Safari
  • [X] IE 11

Caffeinix avatar Aug 21 '20 00:08 Caffeinix

In Vaadin components we use MutationObserver to track dir attribute changes on the <html> element and propagate it to all the elements that explicitly require it. This enables us to use attribute selectors. See our solution here.

web-padawan avatar Aug 21 '20 06:08 web-padawan

Indeed, Polymer has a mixin that does the same thing: https://polymer-library.polymer-project.org/3.0/api/mixins/dir-mixin.

Either of those solutions would cause this to be a viable replacement, but ShadyCSS does not install anything like this itself.

Caffeinix avatar Aug 21 '20 23:08 Caffeinix

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

stale[bot] avatar Aug 22 '21 00:08 stale[bot]

This issue has been automatically closed after being marked stale. If you're still facing this problem with the above solution, please comment and we'll reopen!

stale[bot] avatar Sep 17 '23 16:09 stale[bot]