Привет!

можно ли сделать встраивание только с помощью JS, чтобы обойтись статичным локальным приложением?

Правильно ли я понял что локальное - имеется в виду хостинга у вас нет?
В документации Битрикс написано следующее:

Важно: Следствием вышеуказанных пунктов является то, что механизм встраивания доступен только для серверных приложений!

Так что... можно!

1) Закидываем в архив zip наше приложение (или только index.html)
2) Регистрируем приложение в битрикс (разработчикам > готовые сценарии > локальное приложение)
Настраиваем права (обязательно, placements)
3) Теперь ваше приложение можно открыть в битриксе. Заходим в Разработчикам > интеграции, ищем наше приложение и через контекстное меню жмем "Перейти к приложению"
Нам надо посмотреть куда его закинул Битрикс. Можно через дев тулзы найти iFrame с нашим приложением и скопировать адрес.
4) Осталось зарегистрировать место встраивания.
Тут несколько вариантов.

Вариант 1. Открываем входящие вебхуки, кидаем запрос на bind (можно просто открыть в браузере).
https://dev.1c-bitrix.ru/rest_help/application_emb...

{{url вебхука, который вам выдали}}/placement.bind?PLACEMENT=TASK_VIEW_TAB&HANDLER={{адрес из шага 3}}&TITLE={{My awesome APP}}

Вариант 2. В нашем же приложении с помощью JS-библиотеки Б24 - регаем обработчик методом BX24.callMethod. Там же можно сразу указать HANDLER как текущий url iFrame-а.

Вариант 3. Берем мои файлы index.html и placements.js, добавляем к ним страницу, которую надо отображать (к примеру my-awesome-page.html). Архивируем это все и на шаге 1 - заливаем этот архив.
Тогда в приложении будет открываться уже моя страница. На ней 3 кнопки - зарегать плейсмент, удалить плейсмент, вывести в консоль список текущих плейсментов.
Жмем "добавить" - указываем PLACEMENT (код места встраивания), HANDLER (адрес страницы которую надо встроить - т.е. адрес iFrame-а + /my-awesome-page.html), TITLE.
Код (html - index.html, js - placements.js) В CODEPEN - не работает! Только при запуске из-под Битрикс24:

Тут же можно посмотреть как регаются плейсменты (но лучше нет, т.к. плохой код)

5) Готово. Идем проверять.

Это синтаксис SASS - расширения CSS.

$var - переменная.
.class1 {
&.class2 {}
}
то же самое что
.class.class2

Правильно сказали - в this возвращается document. Т.е. надо выбирать созданный элемент как-то по другому, т.к. у insertAdjacentHTML нет callback функции, внутри которой this был бы равен элементу. И еще, чтобы показать элемент с FadeIn - он должен быть изначально скрытым.
Как вариант:

Битрикс вставляет форму прямо в ваш dom, так что проблем с манипуляциями нет.
В коде ниже - автоматически заполняется поле Компания, спустя 1 секунду (когда уже 100% отрендерится форма).
Можно сделать более красиво, к примеру, через mutation observer.
И еще - битрикс не дает названия полям, так что придется составлять селектор до элемента руками.