Работают ли переменные CSS внутри шаблона или пользовательского элемента? ⇐ CSS

[Anonymous]

Я создаю небольшой веб-сайт, используя веб-компоненты, написанные на чистом HTML, CSS и Javascript. Все работает хорошо, за исключением переменной CSS, которую я хочу использовать. Вот таблица стилей:

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

 :root {
--bh-color-1:#8f1010;
}
.bh-action {
display: inline-block;
text-decoration: none;
text-align: center;
font-weight: 600;
color:whitesmoke;
background-color:var(--bh-color-1);
height:32px;
padding: 0px 16px;
border-radius: 16px;
margin-top: 8px;
}

Есть ли проблемы с синтаксисом? Это из DevTools:

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

Sharpening Service
yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada
[url=#]Get Started[/url]

Вы можете видеть, что класс bh-action из таблицы стилей установлен в элементе , который находится внутри пользовательского элемента.
Также из DevTools:

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

.bh-action {
display: inline-block;
text-decoration: none;
text-align: center;
font-weight: 600;
color: whitesmoke;
background-color: var(--bh-color-1);
height: 32px;
padding: 0px 16px;
border-radius: 16px;
margin-top: 8px;
}

Вы можете видеть, что стиль был применен к элементу , но переменной не было присвоено значение. Все остальное работает так, как ожидалось, включая цвет, если я использую цифры напрямую. Вся таблица стилей импортируется в шаблон, включая объявление переменной. До сих пор я пытался поместить объявления переменных и классов в тег style шаблона и заключить переменную в фигурные скобки, например var({--bh-color-1}) и var. ({{bh-color-1 }}).
Есть ли способ заставить это работать или это проблема?

Подробнее здесь: https://stackoverflow.com/questions/791 ... om-element