【PUG】inputにネストしたら怒られた

はじめに

PUGでlabelとinputを使ってチェックボックスを作っている時につまづいたので備忘録

事象

<label>
    <input type="checkbox" name="hoge" value="0">チェック
</label>

このHTMLをつくるためにPUGで下記のように記述した。

label
    input(type="checkbox")チェック

すると、下記のエラーが出た。

input is a self closing element: <input/> but contains nested content.

原因

input is a self closing element: <input/> but contains nested content.

このエラーはinputは自分だけで完結するのでネストはだめ！ということ。

対応方法

inputにネストされている「チェック」という文字列をinputと同列にする。

label
    input(type="checkbox") チェック

label
    input(type="checkbox")
    span チェック

これでエラーは解消された。