Griffel has an insertionPoint API that allows users to control where Griffel styles are inserted into a document. This is useful for controlling style specificity via <style> tag order. For example, users can ensure all their application styles come after Griffel styles, thus ensuring app styles "win" any specificity battle based on document order (all else being equal of course).
react-shadow should implement a similar API as the current implementation always places all Griffel styles after all application styles meaning application styles always "lose" specificity battles. This comes up in real-world Web Component applications that embed react-shadow as these applications have their own styles and would like to apply class names to Fluent controls without having to re-implement styles as makeStyles() calls. A basic example.
Griffel has an
insertionPointAPI that allows users to control where Griffel styles are inserted into a document. This is useful for controlling style specificity via<style>tag order. For example, users can ensure all their application styles come after Griffel styles, thus ensuring app styles "win" any specificity battle based on document order (all else being equal of course).react-shadowshould implement a similar API as the current implementation always places all Griffel styles after all application styles meaning application styles always "lose" specificity battles. This comes up in real-world Web Component applications that embedreact-shadowas these applications have their own styles and would like to apply class names to Fluent controls without having to re-implement styles asmakeStyles()calls. A basic example.