Есть ли способ установить fillColor с помощью атрибута HTML? (Свободное владение веб-компонентами пользовательского интерфейса)

Question

При использовании веб-компонентов Fluent UI из CDN я узнал, что можно предоставлять некоторые значения адаптивной цветовой системе в качестве атрибутов на<fluent-design-system-provider>элемент. Например:<fluent-design-system-provider base-layer-luminance=".15">

Вопрос. Есть ли аналогичный способ установить fillColor элементов в HTML, чтобы соответствующие значения токенов дизайна были пересчитаны для дочерних элементов?

Например, я хочу сделать что-то вроде этого:

      <div id="myCardContainer" fill-color="neutralLayer2">
     <fluent-button appearance="accent">Hello</fluent-button>
</div>

...и иметь стили<div>дочерние элементы пересчитываются так же, как если бы я использовал метод JavaScript:

      const layer = document.getElementById('myCardContainer');    
fillColor.setValueFor(layer, neutralLayer2);

Answer 1

Не сейчас.

Это отслеживается на https://github.com/microsoft/fast/issues/5286 . Сейчас ведутся некоторые работы над базовой инфраструктурой, которые должны упростить решение этой проблемы в ближайшее время.

Также есть компонент, который делает это в Color Explorer по адресу https://github.com/microsoft/fast/blob/5ba576ffb833ec7d705175608394860888963721/sites/fast-color-explorer/app/components/layer-background/index.ts.

А пока используйте код, который вы разместили, или включите компонент слоя выше. Обратите внимание, что скоро мы переработаем систему слоев, чтобы сделать ее более гибкой. Эта работа будет выполняться в пакете адаптивного пользовательского интерфейса .