Me gustaría tener un valor de producto css var en una actualización de elemento secundario basada en los valores de sus ancestros.
Por ejemplo, ¿hay alguna manera de realizar lo siguiente en css puro?
O, aunque css prefiere, cuál sería una buena manera de realizar esto a través de javascript. Quizás con una función setInterval en el elemento secundario...
let el = document.getElementById('_3b0') let product = 1; while (true) { let val = Number(getComputedStyle(el).getPropertyValue('--val')) console.log(el.id,val) product = product*val el = el.parentNode if (el.id == "container") break } document.getElementById('_3a0').style.setProperty('--product',product) console.log('product:',product) #_0 {--val : 1} #_1 {--val : 2} #_2 {--val : 3} #_3a {--val : 3} #_3b {--val : 4} #_3a0 {--val:1; --product : calc( var(--val)/*product of all --vals from parents = 18 = 1 * 2 * 3 * 3 * 1*/ )} #_3b0 {--val:1; --product : calc( var(--val) /*product of all --vals from parents = 24 = 1 * 2 * 3 * 4 * 1*/ )} <div id="container"> <div id="_0"> <div id="_1"> <div id="_2"> <div id="_3a"> <div id="_3a0"></div> </div> <div id="_3b"> <div id="_3b0"> </div> </div> </div> </div> </div>