-
Notifications
You must be signed in to change notification settings - Fork 759
Description
Problem
Imagine you're building a "drop-in UI" / "widget" kind of library. You don't control the environment (website/app/whatever) that's going to render your widget. How do you ensure that the CSS you write for it won't break due to author styles from the embedding page (e.g. weird/unexpected CSS resets)? Ideally, you would use a custom element and the style encapsulation of shadow DOM. But let's imagine you need it to be in the light DOM for some reason. Correct me if I'm wrong, but I believe that the next best thing, at least once the resolution of the "Allow authors to explicitly place unlayered styles in the cascade layer order" issue is implemented, is to combine a strong cascade layer with revert (specifically not revert-layer, since we need to neutralize author styles across layers), so that elements inside the widget start from a predictable, consistent baseline:
@layer ^my-library {
@layer reset {
.my-library-container {
&,
&::before,
&::after,
*,
*::before,
*::after {
all: revert;
}
}
}
.my-library-some-element {
/* now we should be able to confidently style this! */
}
}Unfortunately, this is one issue with that approach: revert also discards presentational hints, which breaks otherwise self-contained markup such as <img width height> and SVG presentation attributes. Any <svg> with <path>s in .my-library-container will be broken now that d is a presentational hint.
Solution
A new presentational global value that behaves exactly the same as revert, except that it does NOT discard presentational hints. Note: I tried to think of a name that starts with revert- for consistency, but revert-hints or revert-presentational sound like they will revert the hints instead of reverting TO them; revert-to-hints or revert-to-presentational sound unCSSy to me; and anything else I could think of (e.g. revert-stylesheets or revert-css) sounded unclear or ambiguous. Granted, presentational is not perfect either because only a small subset of properties can be influenced by presentational hints, but since the functional difference with revert is limited to properties that do, it seems... fine?