[csswg-drafts] [css-cascade] Cascade layers, `!important` and the style attribute (#6872)

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

== [css-cascade] Cascade layers, `!important` and the style attribute ==
I was looking at some of the new cascade features and how `!important` and layers interact, and there are WPT tests that make conflicting interpretations of the spec and reality, in a way that I have no idea how to make the test pass without horrible hacks.

So https://github.com/web-platform-tests/wpt/blob/fea1b24572b53e22e1af873e56607251653df68d/css/css-cascade/layer-vs-inline-style.html asserts that:

> Important inline style > important layered style

Which makes some amount of sense per https://drafts.csswg.org/css-cascade-5/#style-attr, which says that the style attribute gets cascaded separately. However that's clearly not what is going on in browsers, which clearly cascade the style attribute like the last "regular" rule in the same tree as the element (so the `:host` rule in the example below overrides it):

```html
<!doctype html>
<style>
  div { width: 100px; height: 100px }
</style>
<div style="background-color: blue !important"></div>
<script>
  document.querySelector("div").attachShadow({ mode: "open" }).innerHTML = `
    <style>
      :host { background-color: green !important }
    </style>
  `;
</script>
```

So I think the spec is sane, conceptually, but the spec doesn't match the behavior of browsers. I think the behavior of browsers seems ok (otherwise we prevent web components from enforcing styles).

But then if we want the style attribute to behave like it does in browsers (cascading with the other rules of the element subtree) and we want `!important` to behave with layers as the spec says (important layered styles override important unlayered styles) we need some more subtle definition for this. Otherwise I'd expect the "Important inline style > important layered style" expectation to just be wrong.

Either way something needs to change in either the spec or the implementations.

cc @mirisuzanne @fantasai @xiaochengh 

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


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

Received on Thursday, 9 December 2021 15:34:51 UTC