- <p>The <one> element defines a value for 'data-foo'. The <two> element inherits this value, and additionally assigns a value to 'data-bar'. Finally, the <three> element inherits the 'data-bar' value <em>after</em> variable substitution (in other words, it sees the value ''calc(10px + 10px)''), and then redefines 'data-foo' in terms of that value. Since the value it inherited for 'data-bar' no longer contains a reference to the 'data-foo' property defined on <one>, defining 'data-foo' using the ''data(bar)'' variable is not cyclic, and actually defines a value that will eventually (when referenced as a variable in a normal property) resolve to ''30px''.</p>
0 commit comments