@@ -229,9 +229,15 @@ as described in [[#calculation-of-computed-values]].
229
229
230
230
Note: A way to unregister properties may be added in the future.
231
231
232
- When the <a>current global object's</a> <a>associated <code>Document</code></a> 's {{[[registeredPropertySet]]}} changes,
233
- previously syntactically invalid property values can become valid and vice versa.
234
- This can change the set of <a>declared values</a> which requires the <a>cascade</a> to be recomputed.
232
+ Registering a custom property must <strong> not</strong> affect the [=cascade=] in any way.
233
+ Regardless of what syntax is specified for a registered property,
234
+ at parse time it is still parsed as normal for a [=custom property=] ,
235
+ accepting nearly anything.
236
+ If the [=specified value=] for a registered [=custom property=]
237
+ violates the registered syntax,
238
+ however,
239
+ the property becomes [=invalid at computed-value time=]
240
+ (and thus resets to the registered initial value).
235
241
236
242
<div class='example'>
237
243
By default, all custom property declarations that can be parsed as a sequence of tokens
@@ -249,24 +255,30 @@ This can change the set of <a>declared values</a> which requires the <a>cascade<
249
255
The second '--my-color' declaration overrides the first at parse time (both are valid),
250
256
and the ''var()'' reference in the 'color' property is found to be <a spec=css-variables>invalid at computed-value time</a>
251
257
(because ''url("not-a-color")'' is not a color).
252
- At this stage of the CSS pipeline (computation time), the only available fallback is the initial value
253
- of the property, which in the case of color is ''inherit'' . Although there was a valid usable value
254
- (green), this was removed during parsing because it was superseded by the URL.
258
+ At this stage of the CSS pipeline (computation time),
259
+ the only available fallback is the initial value of the property,
260
+ which in the case of color is ''inherit'' .
261
+ Although there was a valid usable value (green),
262
+ this was removed during parsing because it was superseded by the URL.
255
263
256
264
If we call:
257
265
258
266
<pre class='lang-javascript'>
259
267
CSS.registerProperty({
260
268
name: "--my-color",
261
269
syntax: "<color>",
262
- initialValue: "black"
270
+ initialValue: "black",
271
+ inherits: false
263
272
});
264
273
</pre>
265
274
266
- then the second '--my-color' declaration becomes syntactically invalid at parse time,
267
- and is ignored.
268
- The first '--my-color' is the only valid declaration left for the property,
269
- so 'color' is set to the value ''green'' .
275
+ the parsing doesn't significantly change,
276
+ regardless of whether the registration occurs before or after the stylesheet above.
277
+ The only difference is that it's the '--my-color' property that becomes [=invalid at computed-value time=] instead
278
+ and gets set to its initial value of ''black'' ;
279
+ then 'color' is validly set to ''black'' ,
280
+ rather than being [=invalid at computed-value time=]
281
+ and becoming ''inherit'' .
270
282
</div>
271
283
272
284
Supported syntax strings {#supported-syntax-strings}
0 commit comments