Михаил

createElement так не умеет. Попробуйте insertAdjacentHTML

https://github.com/zalog/placeholder-loading

Для того, чтобы ссылка начала работать, у неё должен быть атрибут href.

Смотрите, svg по своей сути это обычный текст и раз у вас рисование происходит не странице, то у вас есть в html контейнер где уже сгенерирован svg (пользователь же как-то видит результат работы). Ну а дальше, дело техники:

Например использовать checkbox (стилизовать если нужно). Пример

Опция Format On Save в настройках если для всех типов. Если для html, то в поиске настроек ввести html format

input[disabled] {
  background-color: green;
}

<pre>ваш текст</pre>

Вам ничего не мешает в chrome devTools выставить любое разрешение и увидеть медиа запросы

Ну я бы сделал так.
1. По нажатию на кнопку "Cохранить", на сервер отправляются настройки.
2. Сервер на основе настроек формирует нужный html
3. Открываем например безголовым хромом этот html и сохраняем как pdf

В данный момент на проекте для этих нужд использую api для nodejs Puppeteer

-webkit-tap-highlight-color: transparent;

Попробуйте добавить

.btn:active,
.btn:focus {
    outline: none;
}

попробуйте

#preloadDiv {
position: relative;
}

Cпецифичность бы сработала если бы для зеленого цвета селектор был UL LI SPAN, а так у нас получается, что зеленый цвет назначен для UL и пока у span не будет объявлен в стилях свой цвет, span'ы внутри списка будут наследовать зеленый, но как только мы в селекторе используем тег span он станет приоритетнее. В примере у нас сначала действует blue, а потом его перебивает orange так как он находится ниже.

С помощью опции labelOrigin можно сместить, вот пример