dialog要素はcolorを継承しない

Q. 探しものはなんですか？

A. dialog要素がcolorを継承しないという仕様を確認したい

Q.見つけにくいものですか？

A. MDN の中も、Living Standard の中も、探したけれど見つからないのに

<style>
  body { color: red; }
</style>

<dialog open>
  <p>system-colorのcanvastextの色になる</p>
</dialog>

dialog要素のcolorを継承させるためには以下のようにinheritを使う。

body { color: red; }
dialog { color: inherit; }

※color を継承すると currentColor が変わってしまうので dialog の border-color も同様に red に書き換わるので注意

colorを継承する前にちょっと待ってほしい

dialog要素はコンテキストが切り替わるので、単純にcolor: inheritをしてしまうと直前の要素に指定されたcolorを継承してしまうからやっちゃダメかも。

<section class="ド派手なセクション" style="color: red;">
  <!-- bodyのcolorを継承したいのに直前のredになってしまう -->
  <dialog>...</dialog>
</section>