[@sheet] Shadow DOM stylesheet inheritance

[dead-claudia]

Given a hierarchy of global root G > a shadow root A > shadow root B, if a stylesheet with @sheet foo is added to G and a different @sheet foo added to A, how should they compose as adopted by B?

Related: #900, #933, #935, #937, #938 (about half of the existing @sheet-related issues)

This issue leads me more in favor of an HTML-based solution, FWIW.

[dead-claudia]

My suggested resolution is this: do not inherit. Instead, use adopted stylesheets and/or shadowrootstyleorder="outer adopted"/styleOrder: "outer adopted" from w3c/csswg-drafts#11547 to expose them.

[trusktr]

Yeah, specificity and cascade are already an "issue" for many people. It is often the case that people don't intend to change specificity when they modify a selector, they only want to change what they are selecting.

Now we have solutions like layers which are powerful but adding more to learn in order to manage cascaade, and then we'll have new solutions like @sheet that either add more complexity to cascade or don't improve the situation but still require more cognitive load.

This is why frameworks like Tailwind, despite restricting the power of CSS from developers, are successful; they allow people to have an environment where what they write is what they will see rendered without much thought, and modifying a style doesn't break unexpected like changes in specificity with regular CSS do.

The mental model of libs like Tailwind, despite how inflexible they are with regards to the full power of CSS, greatly simplify some of the complexities of CSS.