HTMLの親子構造を無視したHTMLをinnerHTMLに入れたときの挙動

とあるHTMLテンプレートエンジンを使っているときに遭遇して2週間苦しんだので書く。

何があったのか

テンプレートにはしっかり書いたHTMLエスケープとメソッド。
しっかりとメソッドもテンプレート側にオブジェクトとして渡している。
が、何も表示されない。デバッグログにも何もなし。

結論

tbody要素直下にエスケープ文字列を入れていた。

つまりこう書いていた。

template.html

<table>
<! -- 中略 -- >
  <tbody>
    {{this.hogefuga()}}
  </tbody>
</table>

tbody直下には文字列なんて来ない。

ということでよろしくMozilla Developer Network先生。

HTMLTableSectionElement - Web API インターフェイス | MDN

とりあえず言えることは、こいつには 文字列を格納するプロパティはない ということである。

そのため、それが処理できずに消失するという現象が発生したと思われる。

ということで、
詳しい方、もっと良い解説お願いしますorz