[csswg-drafts] [css-cascade] Cascade priority of presentation hints vs. tree scopes (#6659)

xiaochengh has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-cascade] Cascade priority of presentation hints vs. tree scopes ==
This issue affects CSS Cascade Level 4 and 5, both of which have defined the cascade priority comparison between tree scopes, but are not clear which tree scope presentational hints belong to (when UA treats them as author style).

Level 4 [says](https://drafts.csswg.org/css-cascade-4/#preshint) presentational hints are treated as "with a specificity of zero placed at the start of the author style sheet", and Level 5 [says](https://drafts.csswg.org/css-cascade-5/#preshint) they are "in their own cascade layer placed as the lowest layer in the author origin".

Neither says anything about tree scopes, so I'll assume they belong to the same tree scope as the element itself.

As a result, when comparing presentational hints vs. `:host` or `::slotted` rules from a shadow tree, presentational hints win because they are in an outer tree scope (see example below). This seems wrong, as the intention of the spec seems to be that any author rule can beat presentational hints.

To fix it, I'm proposing adding presentational hints as an independent sorting criterion into [Cascade Sorting Order](https://drafts.csswg.org/css-cascade-5/#cascade-sort) that is lower than [origin and importance](https://drafts.csswg.org/css-cascade-5/#cascade-origin) and higher than [context](https://drafts.csswg.org/css-cascade-5/#cascade-context), so that when comparing presentation hints with other rules, presentational hints never win.

---

[Example](https://jsfiddle.net/c8h02efk/):

```html
<div id=host>
  <img width=100 height=100 style="background-color: green">
  <template shadowroot=open>
    <slot></slot>
    <style>
      ::slotted(img) {
        width: 200px;
    }
    </style>
  </template>
</div>
```

If we treat presentational hints as author style in the same tree scope as the element, then the result `width` of the image should be 100px because the presentational hint beats the `::slotted` rule. Fortunately, I haven't seen any browser implement this behavior (tested Chrome, Firefox and Safari), so this is probably just a spec bug fix.



Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6659 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 22 September 2021 01:08:33 UTC