It is unclear how directionality should be inherited into Shadow DOM

[smaug----]

...or if it should be inherited at all.
Per current spec it shouldn't be inherited
https://html.spec.whatwg.org/#the-directionality
Well, the spec doesn't really define how it should work in shadow DOM.

If host has dir="rtl", should that get inherited to shadow? If shadow DOM has dir="rtl" should that get inherited to a slots assigned nodes?

[smaug----]

@hayatoito

[hayatoito]

We should upstream the section 6 in Shadow DOM spec to HTML Standard.
https://w3c.github.io/webcomponents/spec/shadow/#attributes

[rniwa]

It seems natural that the directionality of text is inherited into the shadow tree. A component can always override the directionality of the content with dir content attribute within its shadow tree.

If the entire document is in RTL, for example, then text inside components (including slotted contents) should supposedly need to be shown in RTL by default.

[rniwa]

Coincidentally, that's what WebKit and Chrome does: https://jsfiddle.net/ho7qhh43/

[smaug----]

It seems natural that the directionality of text is inherited into the shadow tree.

This sounds reasonable, but what about inheriting directionality from slot to assigned nodes?
(jsfiddle doesn't seem to work at some can't check whether the example is testing that.)

[smaug----]

https://jsfiddle.net/wcvncxma/
So in Chrome directionality does seem to propagate from shadow DOM to assigned slots, but not when
dir-attribute is on slot element itself.

[smaug----]

A bit modified testcase https://jsfiddle.net/88w2druw/
Looks like dir="auto" handling works in the flattened tree, at least in Chrome.

I still don't understand the case 3. Why dir on <slot> doesn't work.

[rniwa]

I think case 3 is simply a bug. We're probably not taking the directionality of the slot into account due to its not generating a CSS box.

[smaug----]

In case dir attribute is used inside shadow DOM, I assume it is inherited also to fallback content of elements, so that querySelector(All) can use :dir pseudo class the normal way?
So, dir propagates to assignedNodes of slot, and it propagates to fallback content too?
I guess same applies to the child nodes of a host. Directionality is propagated to the shadow DOM, but also to the explicit children if they aren't assigned to any slots.
Hmm, but if they are assigned, which one wins - I guess the path which goes through slot element.

And, should rtl text inside slot's fallback content affect to the ancestors even if the slot had assigned nodes?

[smaug----]

https://w3c.github.io/webcomponents/spec/shadow/#attributes clearly isn't enough here.

[hayatoito]

The definition of flat tree is here: https://drafts.csswg.org/css-scoping/#flattening

[kojiishi]

The dir attributes sets the CSS direction property and rendering honors the CSS direction property, so it should inherit in the same way as CSS inheritance does in all places. Otherwise we might see DOM operations such as dir=auto or querySelector to behave differently from what we render.

[smaug----]

querySelector doesn't follow the rendering model, I mean, it can return stuff which isn't rendered at all.

And dir=auto -handling is also unclear. Per current spec it follows DOM tree, excluding shadow DOM.

And should :dir(ltr) or :dir(rtl) work with querySelector when selecting slot's fallback content in case there are assigned nodes to the slot? If not, why? Other selectors do work.

[tabatkins]

Right; in particular, selector matching works over the tree-of-trees, not the flat tree, so having :dir pay attention to directionality inheriting thru the flat tree seems... confusing?

(I do think that inheriting it thru the flat tree makes the most sense, unfortunately.)

[kojiishi]

Ah, good point.

I don't remember details, but Aharon and a few other bidi/i18n experts preferred to inherit the dir and lang attribute when I asked them before, and there were some discussions I could find in w3c bugzilla 27222 and WICG/webcomponents#385.

If we want to revisit this, I'm not opposed to it.

[smaug----]

If it inherits through flattened tree, what should the directionality be for fallback content when there are assigned nodes for the slot?

This isn't about revisiting anything, but actually defining how this all should work.

[tabatkins]

That is to say, in this example:

<x-component dir=ltr>
 <::shadow>
  <slot select=* dir=rtl>
   <span id=foo>foo</span>
  </slot>
 </::shadow>
 <span id=bar>bar</span>
</x-component>

What's the directionality of #foo and #bar? If directionality inherits thru the flat tree, then #bar inherits an rtl direction from the slot (rather than an ltr direction from the x-component). But #foo isn't in the flat tree at all, so what is it's direction?

[smaug----]

And also, if there is rtl text inside #foo and slot has dir=auto, what should the directionality of #bar be?
Or if slot has name=baz and #bar doesn't have slot=baz, yet #bar has rtl text and x-component has dir=auto, should the contents of #bar affect to the directionality of the x-component.

[kojiishi]

@smaug---- dir=auto is the scenario I discussed with experts, and they wanted flat tree to compute auto-dir, from #bar in this case. But given their understanding on shadow dom isn't very high, we could try other questions or try to find other experts.

@tabatkins good point. I don't know the answer from the top of my head, but does the directionality of #foo matter if it's not going to be rendered at all?

[smaug----]

directionality of #foo matters because if affects how querySelector(:dir(...)) works. It can't be left undefined.

[kojiishi]

:dir() matches to elements with the 'dir' attribute, not the inherited value, no?

[kojiishi]

nvm, I was wrong. ^

[kojiishi]

Allow me to confirm what we're discussing. The original topic was about whether to inherit or not, I still prefer to inherit, but can't read whether we have consensus or not. Do we, or does it depend on another topic how it applies/inherits to fallback contents that are not rendered?

For the fallback contents that are not rendered, I don't have opinion. Anyone mind to suggest?

[tabatkins]

The directionality of fallback contents is one problem. The larger problem is that selector matching is defined over the tree-of-trees, not the flat tree, but :dir(), to continue to remain useful, needs to be based on the flat-tree directionality inheritance. (Selectors doesn't strictly define how :dir() matches; it just says that the document language can take various things into account to figure out what the directionality should be.)

[kojiishi]

I see, thank you, understood the topic. That part is probably about the dir attribute section defines to inherit from:

the element's parent element

so if we're in consensus to do this in flat-tree, we can define this more clearly, like saying "parent in flat-tree, but for elements that are not in flat-tree, inherit from parent in tree-of-trees"?

[tabatkins]

That doesn't solve the larger problem I just outlined. Again, Selectors are defined to match on the tree-of-trees, before we construct the flat tree, so if directionality is defined to inherit over the flat tree, :dir() can't match based on the inherited directionality. We'll need to define what it matches on - in other words, in my previous example, does #bar match :dir(ltr) or :dir(rtl), and whichever answer you give, why does it match that (without referencing the flat tree)?