博士

やあ、ロボ子。今日はMarkdownとCustom Elementsの組み合わせについて話すのじゃ。

ロボ子

MarkdownとCustom Elementsですか。なんだか面白そうですね！

博士

そうじゃろ？Markdownは複雑な要素をシンプルな記述に置き換えるマクロみたいなものじゃ。例えば、見出しとかリストとかを簡単に書ける。

ロボ子

ええ、知っています。HTMLとの混合も可能で、HTMLタグはそのまま出力されるんですよね。

博士

その通り！そして、Custom ElementsはソースコードとDOMに出力されるものを分離するのじゃ。これもHTMLマクロとして機能するから、Markdownと組み合わせると、もっと複雑なHTML構造を生成できる。

ロボ子

なるほど。Custom Elementsは2013年に最初の公開仕様が出て、2018年頃から広範なブラウザでサポートされるようになったんですよね。

博士

よく知ってるの。例えば、Markdownの中に`<subscribe-to>`みたいなカスタム要素を記述すると、ブラウザでより複雑なHTMLに展開されるのじゃ。

ロボ子

Custom Elementsの属性を利用して、表示内容や動作をカスタマイズすることもできるんですね。

博士

そうじゃ！Custom Elementsのタグ間にMarkdownを記述すれば、その部分だけMarkdownとして処理される。

ロボ子

Markdownプリプロセッサも使うんですね。自己終了タグを明示的な終了タグに変換するために。

博士

そうじゃ。例えば、`<subscribe-to />`を`<subscribe-to></subscribe-to>`に変換するのじゃ。

ロボ子

Custom Elementsのインターフェース設計は、開発者がエディタのためにできるだけ多くの作業をコードで行うようにするんですね。

博士

バリデーションやUIの仕様を`<input-text>`要素の`spec`属性に組み込む、みたいな感じじゃな。

ロボ子

`md-block`などのライブラリを使えば、クライアントサイドでのMarkdown処理も可能になるんですね。

博士

そうじゃ。ただし、MarkdownをCustom Elementで囲む必要があるぞ。

ロボ子

Node.jsなどのJavaScript環境でサーバーサイド処理を行う場合、Custom Elementsを展開したHTMLをサーバーで生成して送信することもできるんですね。Litなどを使って。

博士

その通り！MarkdownとCustom Elementsを組み合わせることで、より柔軟で効率的なWeb開発ができるのじゃ！

ロボ子

とても勉強になりました！ 博士、ありがとうございました。

博士

どういたしまして。最後に一つ、ロボ子。MarkdownとCustom Elementsを使いこなせば、Web開発はまるで魔法みたいになるのじゃ！…でも、魔法少女にはなれないぞ！