【pug】『inputタグの中には要素を入れられない』を間違うとどうなるか？

webを生業にしている人にとっては当たり前の話です。

最近、pugでwebフォームを作る機会がありました。
webフォームでラジオボタンを操る時に、ラジオボタンのテキストでも選択できるようにする手段はいくつかあります。
その手段の一つが、下記のようにinput タグをlabel タグに入れ子してしまう方法です。

<form>
    <label>
        <input type="radio" />
        <span class="label">テキスト</span>
    </label>
</form>

このソースをpugで実現する際に、「入れ子」のイメージに釣られてつまづいてしまいました。
今回は反省も含めて備忘録としてお伝えします。

ビルド環境

今回はwebpackを使用します

実装する時に、label タグにinput タグを入れ子にするという考えがあったため、冒頭のコードを次のようになると考えてしまいました。

<form>
     <label>
          <input type="radio">
                <span class="label">テキスト</span>
         </input>
     <label>
</form>

そのHTMLをpugで再現すると次のようになります。

form
     label
          input(type="radio") 
              span.label テキスト

このコードをビルドすると、下記のエラーでコンパイルできません。

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

タグの性質上は、input タグは自分で完結する要素なので、ネスとして中身を入れられないと言う事です。

おさらいですが、input タグは自分で完結するタグです。

そのため、input の配下にネストが入ることはあり得ません。

form
     label
          input(type="radio") 
              span.label テキスト  //<--

ネストした要素を、ネストから外します。

form
     label
          input(type="radio") 
          span.label テキスト

ネストの代わりに#[]を使用することで、前述したコードと同じ事ができます。

form
     label #[input(type="radio") ]
          span.label テキスト

以上です。

書いてみるとなんて事はない話ですが、htmlを直接書かない事も少なくない昨今では本来のタグについて忘れてしまう事もしばしばですね。
反省です。