[css-cascade] Cascade layers, !important and the style attribute #6872
Description
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):
<!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.