![]() Unless configured not to, a DesignToken emits a token to CSS automatically whenever the value is set for an element. SpecialColor.getValueFor(descendent) // "#FFFFFF" Doing so causes retrieval of the nearest ancestor's value instead: leteValueFor(descendent) SpecialColor.getValueFor(descendent) // "#F7F7F7" specialColor.getValueFor(ancestor) // "#FFFFFF" The value returned will be the value set for the nearest ancestor (or the element itself). Once the value is set for a node, the value is available to use for that node or any descendent node. tValueFor(descendent, '#F7F7F7') Ī default value can be set for a token, so that the default value is returned from getValueFor() in cases where no other token value is found for a node tree. This allows tokens to be set to different values for distinct DOM trees: const ancestor = document.querySelector('my-element') as FASTElement Ĭonst descendent = ancestor.querySelector('my-element') as FASTElement Setting ValuesĪ DesignToken value is set for a FASTElement or HTMLBodyElement node. ![]() The type assertion informs what types the token can be set to (and what type will be retrieved), and the name parameter will serve as the CSS Custom Property name (more on that later). The Fluent UI Web Components are built using Microsoft's fast-foundation and fast-element libraries, so customizing requires using the original FAST types that underlie the Fluent UI Web Components.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |