UIのコンポーネントは、APIをシンプルにするために、コンポーネント内に自動的に定型文(boilerplate)を挿入する機能を備えています。UIではこのプロセスをコンパイルと呼びます。UIのコンポーネント内に配置された要素やその内容が移動されたり、ラップされたり、新しいクラスが付加されたりします。コンパイルは裏で自動的に実行されるため(透過的であるため)、開発者は基本的にコンパイルを意識する必要はありません。場合によってはコンパイルの影響を回避する方法を知っておいた方が便利です(例えば新しいフレームワークバインディングを開発する時など)。UIのコンポーネントがどんなコンパイルを行っているか、すなわちコンポーネント内に配置された要素やその内容にどんな変更を加えているかを説明します。ons-pageのコンパイルons-pageのコンパイル中にはいくつかの重要な変更が行われます。背景色や背景画像を表示する部分です。スクロール可能な部分です。この部分にほとんどの内容を入れることになります。スクロールしても画面に固定表示される要素です。プロパティを付加すれば固定表示することができます。この方法はいくつかのモバイルブラウザでのスクロールにおいて、非常に多くのトラブルの原因になります。そのため、固定表示したい要素とスクロールさせたい要素は、後述する別々の場所に配置することをお勧めします。その際、それらの要素はons-pageの初期化時に移動されたりラップされたりすることがあるため、後からそれらの要素に内容を追加したりする場合にはご注意ください。<ons-fab></ons-fab></ons-page>このように、.pageやdiv.page__background、div.page__contentが自動的に付加されているのが分かると思います。一方で、ons-toolbarとons-fabは固定要素なので、前述のコンテナの外側に置かれたままになります。コンパイルを迂回(bypass)するのはとても簡単です。UIは何も変更を行いません。class="background">といったクラス名も使うことができます。その場合、page__contentやpage__backgroundなどといったクラスが自動的に付加されます。<ons-fab></ons-fab></ons-page>ons-toolbarのコンパイルons-toolbarはdiv.leftとdiv.center、div.rightの3つのコンテナに分かれています。leftとcenter、rightは本物のクラス(toolbar__leftとtoolbar__center、toolbar__right)の別名(alias)です。right」の順番になるように自動的にソートされます。list-item__right">右側のコンテンツ</div></ons-list-item>コンパイル前の時点でleft、center、rightなどのコンテナがない場合、ons-list-itemは自動的にdiv.list-item__centerコンテナを追加して内容をラップします。subscribing!。