css - 継承時の遷移動作

Question

今日、ネストされた要素が inherit キーワードを使用する場合の遷移の興味深い動作を発見しました。ネストされたすべての要素の遷移を継承しないと、すぐにトリガーされます。一方、継承遷移がカスケードでトリガーされる場合。（コメントで述べたように、この動作はクロムに固有のものです）

継承なし

const change = document.getElementById("change");
let toggler = true;
change.addEventListener("click", () => {
    toggler = !toggler;
    document.documentElement.style
    .setProperty('--color', toggler ? "black" : "red");
})

::root{
  --color: "black";
}

* {
  transition: color 1s;
  color: var(--color);
}

.test {
  color: inherit;
}

<div>
  Text level1
  <div>
    Text level2
    <div>
      Text level3
    </div>
  </div>
  <button id="change">
    ChangeColor
  </button>
</div>

継承あり

const change = document.getElementById("change");
let toggler = true;
change.addEventListener("click", () => {
toggler = !toggler;
    document.documentElement.style
    .setProperty('--color', toggler ? "black" : "red");
    
})

::root{
  --color: "black";
}

* {
  transition: color 1s;
  color: var(--color);
}

.test {
  color: inherit;
}

<div class="test">
  Text level1
  <div class="test">
    Text level2
    <div class="test">
      Text level3
    </div>
  </div>
  <button id="change">
    ChangeColor
  </button>
</div>

継承を使用してもすぐに色を変更する方法はありますか?