CSS property { inherits }
Something that I don't quite understand is how the inherits setting inside the property definition works. Take, for instance,
@property --theme {
syntax: '<color>';
initial-value: #22517b;
inherits: false;
}
What effect does inherits have? I understand the concept of CSS inheritance, like you can say color:inherits so it will take a value of the nearest parent definition (if any). But I'm not sure how this translates to the css property.7 Replies
Good question.
According to https://drafts.css-houdini.org/css-properties-values-api/#the-propertydefinition-dictionary:
i'm still trying to figure out what this means in a practical example.
maybe our sorcerer supreme knows something about this lol
i think it has to do something with being available in shadow-dom. But not sure. I couldnt find a single example of inherits:true
Becuase properties still inherit - define it in the root and then update on a component, it works as expected. So I think maybe there is some quirk I’m missing …
yea, inherits here is not the same as inheriting the value of a property. it think its about the property itself... but in what scenario ???
I've put out some questions elsewhere and maybe the almighty Kevin jumps in to the rescue
think i have it
True: the initial value will be set by a previous declared custom property (if type matches)
False: initial value will be set by the @property
Aha
So that isn’t how I thought it would work…
I guess I expected the property is defined first and the initial value is blue. But then :root overrides it to red. When inherits is true, it ignores the :root …