[Shadow DOM]: :host-context rule does not apply to matching nodes within the shadow root

• Component: CSS
• Status: RESOLVED WONTFIX

[Chris Joel]

Please consider the following test cases:

http://output.jsbin.com/menajes (Custom Elements & Shadow DOM)
http://output.jsbin.com/gafocub (Shadow DOM only)

The test cases feature two elements, each with a similar attached shadow root. The stylesheet within each shadow root contains a rule whose selector includes :host-context([dir="rtl"]).

What I expected to happen:

The contents in the second shadow root match the :host-context selector, causing text to be aligned to the right.

What actually happened:

The contents in the second shadow root is incorrectly aligned to the left.

The :host-context feature is extremely useful for navigating style encapsulation in some situations. As demonstrated in the test cases, it is probably the best way to conditionally style a shadow root's elements when RTL is set by some uncertain ancestor of the host.

[Ryosuke Niwa]

We're not going to support :host-context in WebKit.

The particular example shown here is better served with `text-align: start`.

Using `[dir=rtl]` is not great because there could be an equivalent CSS properties such as `direction: rtl` specified somewhere in the ancestor chain.  It also doesn't take `dir=auto` into account whereas `text-align: start` would work in either case because it uses the computed style to align the text.

[Chris Joel]

> The particular example shown here is better served with `text-align: start`.

The RTL example is intended is to demonstrate that it is desirable to conditionally apply styles based on special knowledge of directionality. There may be more than one way to achieve this with text-align, but there is no equivalent for `text-align: start` when using transforms to position an element (for example).

> Using `[dir=rtl]` is not great because there could be an equivalent CSS properties such as `direction: rtl` specified somewhere in the ancestor chain.  It also doesn't take `dir=auto` into account whereas `text-align: start` would work in either case because it uses the computed style to align the text.

Yes, the solution is not perfect for the RTL use case. However, it provides a working strategy to achieve the desired result. If an ancestor node provides a specific indicator for directionality (dir="rtl"), then a component can rely on that indicator and change styles as needed using CSS. I don't know of a declarative way to achieve the same result without :host-context. Is there one?

Would it be helpful to consider an alternate use case? If so, please consider this one: http://output.jsbin.com/qavodi

In the use case, I would like to style an element's Shadow DOM tree in a special way depending on whether or not the element resides within an anchor. The presentation is further specialized if the anchor happens to be configured with target="_blank".

[Ryosuke Niwa]

Changing the behavior of elements like that based on context is anti-pattern in our opinion and should be discouraged.

I don't think it's helpful to have this discussion on Bugzilla.  It's better to bring that up in standards discussion instead.