Riot.jsでモーダルウィンドウ

Riot.js Advent Calendar 2016見ていたら何か作りたくなったのでモーダルウィンドウを作ってみました。

ソース

使用例

使い方

カスタムタグ内に書いたHTMLがそのままモーダルウィンドウの内容になります。
this.closeでモーダルウィンドウを閉じるので必ず一つ以上書く必要があります。

index.html

    <nak-modal id='modal-1'>
        <p>CONTENTS hogehoge</p>
        <button onclick={this.close}>Close</button>
    </nak-modal>

モーダルウィンドウを開くアクションはopenです。
以下ではボタンを押すと発火するようにしてあります。

index.html

    var mods = riot.mount('nak-modal');
    var btn=document.getElementById('open-modal-1');
    btn.addEventListener('click',function(){mods[0].open();});

問題点

mountするときに一瞬モーダル内が描画される。

これ、before-mountでdisplay:noneしてもダメなので、nak-modal自体にstyle='display:none'と書かなきゃいけないけど、カッコ悪い。

riot.jsライブラリのテスト手法のベストプラクティスがわからない。

どこかにテスト手法に言及した記事無いですか。軽く探しても見つからなかった。

最後に

モーダルウィンドウはHTML,script,cssが連携しているのでコンポーネント化の恩恵が大きいですが、ライブラリにするにはcssをSPAの方向性に合わせて上書きする必要があるなどいろいろ課題がありそうです。