CSS lifecycle API

I’m not sure if this better belongs in some Houdini repo or not so I’m posting here.

I would like the ability to track the lifecycle of CSS properties (restricting to custom properties is fine with me). Particularly I would like to know:

• When an element is using a property (meaning the property is part of a rule that is currently valid).
• When an element stops using a property.

This would be particular useful within the world of CSS polyfills (and again, restricting to custom properties makes sense to me).

One case where I would like to use this feature is to implement the previous web component decorator idea. This idea was to use a template on an element when a decorator property was present. Implementing this as a custom element might meaning having a custom property that looks like:

.some-selector[open] {
  --decorator: url(#some-template);
}

I don’t have an opinion on what the lifecycle API would look like, just that it allowed me to register --decorator as a property I am interested in observing.

Has that decorator proposal been superseded by Shadow DOM v1 slots?

It was removed for a variety of reasons from what I understand. Anyways, I’m not proposing to bring that API back, just using it as an example of something that could be implemented if there were a CSS lifecycle API.

Any implementer feedback on this idea?