MurakamiShinyu
commented
1 year ago 親要素への属性の移動・コピーをすべて廃止する案
もともと、自動生成の親要素にid属性を移動したりclass属性をコピーする理由は、そうしないとCSSで自動生成されたsectionのスタイルを指定することができないためだった。しかし、CSSで :has() 擬似クラスが使えるようになると、その必要はなくなる。
:has() 擬似クラスはChrome 105から利用可能。Vivliostyle.jsでももうすぐ実装予定：
たとえば、次のようなHTMLで
<section>
<h2 id="ID1" class="A">Aaaa</h2>
<p>Aaaa aaa aaaaa.</p>
</section>
<section>
<h2 id="ID2" class="B">Bbbbb</h2>
<p>Bbbbbb bbb bbbb.</p>
</section>このようにsection要素に属性がない場合であっても、次のように :has() を使うと各sectionのスタイルの指定ができる：
section:has(> #ID1) {
…
}
section:has(> .B) {
…
}section要素にどうしてもidやclassやその他の属性を指定したい場合は、HTMLブロックで明示的にsection要素を書くとよい。その提案：
nosuke23
akabekobeko
Update 2022-10-01 開発者会議 での討論の結果、親要素への属性の移動・コピーをすべて廃止する案を採用することに決定。
よって、以下の最初の提案「自動生成の親要素に移動・コピーする属性を
#idと.classに限定」は取り下げ。現在のvfmの仕様では、見出しに指定された属性は、HTMLの見出し要素(h1-h6)だけでなく自動生成されるsection要素にも出力される（ただし id は section のみなど例外あり）。また、画像でimg要素を囲むfigure要素が自動生成される場合にも同様で、指定された属性はimgとfigureの両方に出力される（ただし width 属性などは img のみ）。この仕様になったのは以下のissueで議論された結果である:
8
9
15
しかし、この仕様であまり便利ではないことがある。
たとえばstyle属性で見出しのスタイルを指定したい場合。
例：
出力されるHTMLは：
このように見出しに指定したスタイルは見出しのh2要素だけでなくsection要素にも指定されてしまい、意図しない結果になる。
通常はstyle属性ではなくクラスの指定によってスタイル指定を行うが、それでも同様の問題がある。たとえばスタイルシートで
.lorem {border: solid}というクラスの定義があってこのクラスを見出しに指定した場合、見出しとセクション全体の両方がボーダー囲みになる。このためvfmにより生成されるHTMLのためのスタイルシートを書くときは、同じクラス名が見出しとsectionの両方にあることを意識して、
h2.lorem {…}やsection.lorem {…}のように要素名も指定してクラスのスタイルを定義しなくてはならない。クラス名だけでスタイルを指定しているような既存のスタイルシートを利用できないのも不便だ（たとえば Tailwind CSS では、.border-solid {border: solid}のようにクラス名に対するスタイルが定義されているが、このようなスタイルシートを利用できない）。仕様変更の提案
この問題の改善のために、以下の仕様変更を行うことを提案する。
#idと.classに限定#idの形式で指定したid属性は自動生成の親要素に移動、.classの形式で指定したclass名は親要素にコピー（これらは変更なし） ※これを変更する案もあり： 親要素への属性の移動・コピーをすべて廃止する案name=valueまたは値を省略したnameだけの形式）は、親要素にコピーしない以下、詳しい説明。
自動生成の親要素に移動・コピーする属性を
#idと.classに限定自動生成の親要素に移動・コピーする属性を
#idと.classに限定し、それ以外の形式での属性の指定（name=valueまたは値を省略したnameの形式）は、親要素にコピーしないようにする。idとclassについても、
id=ID、class=CLASSという形式での指定であれば、親要素ではなく当該要素のidとclassとなる。.classとclass=CLASSの両方の指定が同時にある場合は.classは親要素のクラス、class=CLASSは当該要素のクラスとなる。 これによって、親要素と当該要素にそれぞれ別のidとclassを指定することが可能になる。例：
現在のvfmで出力されるHTML：
この仕様変更をおこなった場合の出力されるHTML：
例：
現在のvfmで出力されるHTML：
この仕様変更をおこなった場合の出力されるHTML：
現在の仕様でも一部の属性（
widthなど）は親要素にコピーしないので、変更後の仕様（name=value形式の属性はすべてコピーしない）のほうが一貫性があって分かりやすいといえる。注意点：
#IDと.Classはそれぞれid=IDとclass=Classの簡易記法といえたが、この仕様変更によってそうではなくなる。{.Class1 .Class2}と書き、そうでないなら{class="Class1 Class2"}と書くことになる。{attr}は{attr=""}と同じ意味である（HTMLの属性の仕様から）。したがって{.foo class}は{.foo class=""}と同じで、親要素にのみクラス名を出力（class="foo"）、当該要素はクラス名なし（class=""）となる。検討事項：
.classを#idと同様に親要素だけに属性を出力するものとしたほうがよいかもしれない。明示的な親要素がある場合の見出しや画像では親要素の自動生成をせず、属性の移動・コピーをしない
これについては、別のissueに分ける：
152
153