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
MarkBoots
MarkBoots3y ago
Good question. According to https://drafts.css-houdini.org/css-properties-values-api/#the-propertydefinition-dictionary:
inherits, of type boolean:
True if this custom property should inherit down the DOM tree; False otherwise.
inherits, of type boolean:
True if this custom property should inherit down the DOM tree; False otherwise.
i'm still trying to figure out what this means in a practical example.
Mannix
Mannix3y ago
maybe our sorcerer supreme knows something about this lol
MarkBoots
MarkBoots3y ago
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
SirAlan
SirAlan3y ago
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 …
MarkBoots
MarkBoots3y ago
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
MarkBoots
MarkBoots3y ago
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
SirAlan
SirAlan3y ago
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 …
Want results from more Discord servers?
Add your server