Использование FAST Есть ли способ применить стили к дочерним элементам ShadowDOM?

Question

Я работаю с набором инструментов FAST ( https://fast.design/), создавая свои собственные элементы, которые я хочу использовать. Часть этого путешествия привела меня кToolbar.

Был Toolbar, Я хочу сделать фон кнопок прозрачным (чтобы он выглядел так: https://fluentsite.z22.web.core.windows.net/components/toolbar/definition. Теперь я мог бы создать другой элемент, т.е.ToolbarButton что расширяет Button(и любые другие элементы управления, для которых необходимо удалить фон), и он будет работать для моей цели. Тем не менее, мне кажется, что я должен уметь это делать, потому что это уникальная чертаToolbar.

Я не уверен, возможно ли это вообще, но я не могу понять этого, просматривая документацию и исходный код на GitHub.

Любой совет будет принят во внимание.

Ссылка: https://github.com/microsoft/fast/issues/3548

Answer 1

Это большой вопрос. К счастью, сама shadow dom поддерживает функцию CSS именно для этого сценария. Вы можете использовать::slottedселектор в CSS для вашей панели инструментов, чтобы выбрать определенные элементы, которые вставлены в слоты панели инструментов, и применить к ним пользовательские стили. Итак, вы можете настроить таргетинг на кнопку, которая вставлена ​​в панель инструментов, и использовать ее, чтобы установить свойство css для кнопки или применить стили непосредственно к ней или ее частям CSS. Вот ссылка на документы MDN по этому поводу: https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

Вот пример CSS для вашего сценария.

::slotted(fast-button) {
  --accent-fill-rest: transparent;
}

Помните, что это должно войти в CSS панели инструментов, чтобы повлиять на все fast-button элементы, которые вставляются в слоты панели инструментов.