[kobezzza]

<div class="box"></div>

<script>
  var box = new Chat('.box')
</script>

Почти так, если интересно, то у себя я сделал так:

import('b-button.manifest')

В манифесте написано от кого он наследуется и что ему нужно. Команда импорт сама решает что нужно подгрузить и т.д. (у меня это делается на этапе сборки проекта). Т.е. есть блок b-input он наследник i-form, тот в свою очередь наследуется от i-block и т.д. Наследование идёт как в логике, так и в шаблонах с CSS.

Когда я делаю импорт, все необходимые файлы зависимости собираются автоматом и у меня совсем не болит голова, что я забыл что-то подключить.

А инкапсуляция виджетов, у меня сделана с помощью БЭМ, т.е. все блоки атормны и если мне нужно внутрь одного блока вставить другой, то я пишу в шаблоне так:

{template bButton extends iForm}
    /* Вызываю другой блок в блоке */
    {bem b-link, href: 'google.com', title: 'Нажми меня'}моя ссылка{end}
{end}

bem директива будет заменена на необходимый шаблон блока с переданными ему параметрами.