<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body>
<p>
<div>
<b><a class="bz_bug_link
bz_status_RESOLVED bz_closed"
title="RESOLVED WONTFIX - [Shadow DOM]: :host-context rule does not apply to matching nodes within the shadow root"
href="https://bugs.webkit.org/show_bug.cgi?id=160038#c2">Comment # 2</a>
on <a class="bz_bug_link
bz_status_RESOLVED bz_closed"
title="RESOLVED WONTFIX - [Shadow DOM]: :host-context rule does not apply to matching nodes within the shadow root"
href="https://bugs.webkit.org/show_bug.cgi?id=160038">bug 160038</a>
from <span class="vcard"><a class="email" href="mailto:cdata@google.com" title="Chris Joel <cdata@google.com>"> <span class="fn">Chris Joel</span></a>
</span></b>
<pre><span class="quote">> The particular example shown here is better served with `text-align: start`.</span >
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).
<span class="quote">> 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.</span >
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: <a href="http://output.jsbin.com/qavodi">http://output.jsbin.com/qavodi</a>
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".</pre>
</div>
</p>
<hr>
<span>You are receiving this mail because:</span>
<ul>
<li>You are the assignee for the bug.</li>
</ul>
</body>
</html>