CSS переходит на первом креплении ⇐ Javascript

[Anonymous]

У меня есть приложение Svelte, которое привязывает некоторые точки прогресса в довольно простой HTML -сайт.

Код: Выделить всё

hello





.progress-dots {
display: flex;
justify-content: center;
}

.progress-dots__dot {
width: 10px;
aspect-ratio: 1 / 1;
background: #ccc;
border-radius: 100%;
transition: background 0.3s ease-in-out
}

Проблема, с которой я сталкиваюсь, заключается в том, что когда компонент сначала установлен, я получаю переход на элементе .progress-dots__dot . Похоже, что он переходит от прозрачного к #CCC .
Я добавил Hello в корне компонента, чтобы я мог убедиться, что это не эффект непрозрачности или что -то в этом роде на компоненте. Это только .progress-dots__dot , который переходит. alt = "performance" src = "https://i.sstatic.net/e4dqcgez.png"/>
Я сделал тест, изменив корень Hello на этот

Код: Выделить всё

hello
world

.test {
transition: color 2s ease-in-out; color: teal;
}

и, как ни странно, когда веб -сайт загружает этот результат. /> ОК, проблема заключалась в том, что у меня есть Compileroptions: {CustomElement: true} < /code>.
Изменение ИТ заставляет все работать. Но я чувствую, что это должно работать в любом случае, верно?

Подробнее здесь: https://stackoverflow.com/questions/795 ... irst-mount