Лучше использовать style строку и пихать туда переменные из JS. Если тащить переменные в CSS из скрипта, то придется для каждого инстанса компонента генерировать разный набор CSS. <Component style="—some-var: {var};" /> Ну или тот сахар с пулей в ногу "невидимым" div использовать.
Разве? <Component bc= {var} /> в компоненте export let bc = '#fff'; <style> .class { background-color: var(--bc); } </style> так ведь, вроде.
— Лучше использовать style строку и пихать туда переменные из JS. Это как?
Внутри компонента <script> export let var = "red"; </script> <div class="element" style="—some-var: {var}" /> <style> .element { color: var(—some-var); } </style>
У всех инстансов будет идентичный CSS, но атррибут на style разный, задача с пробросом переменных из JS в CSS решена.
Можно даже под свои нужны написать какой-нибудь хелпер для генерирования строки с переменными.
Понял, спасибо. Хеши разные при этом?
Стили те же, переменные долетают из инлайновых стилей с аттрибута style.
Ага. Разобрался. Да, работает трюк. Спасибо
Обсуждают сегодня