Компонент индикатора загрузки

• Следует проверить, получится ли обернуть компонент в елемент и не продать душу, сбрасывая стили

демо

Решения

Я сделал 4 подхода к этой задаче:

Инлайн разметка + ванильный JavaScript

• Плюсы:
  • Не требуется клиентский рендеринг.
  • Привычные апи, специфичное знание не наращивается.

• Минусы
  • Нужен контроль за целостностью доставки разметки, стилей и скриптов, или шаг компиляции html.
  • Стили неизолированны: мы не можем гарантировать, что если пользователь переопределит их, поведение будет соответствовать заявленному.

Веб-компоненты

Даёт возможность публиковать компоненты типа <custom-component>, и можем быть уверенны, что в них находится именно то, что мы задизайнили.

• Плюсы:
  • Изоляция стилей.
  • Разметка скрыта в логике компонента.

• Минусы
  • Только клиентский рендеринг.
  • Специфичное апи.

Декларативный Shadow DOM

Даёт возможность писать инлайн разметку, при этом сохранить изоляцию стилей.

• Плюсы:
  • Не требуется клиентский рендеринг.
  • Изоляция стилей.

• Минусы
  • Нужен контроль за целостностью доставки разметки, стилей и скриптов, или шаг компиляции html.
  • Ограниченная поддержка.

Почти чистый CSS

JS нужен только чтобы фиксировать значение в строке ввода процента.

• Плюсы:
  • Весело.
  • Производительно (относительно javascript-решений).

• Минусы
  • Не масштабируется.
  • Ограниченная поддержка.