Problem
Currently, EUI uses several Emotion <Global /> components which inject styles directly into the head:
|
return <Global styles={styles} />; |
|
return <Global styles={globalStyles(euiTheme)} />; |
|
<Global styles={euiOverlayMaskBodyStyles} /> |
|
<Global styles={{ ':root': themeCSSVariables }} /> |
This head insertion occurs even when EUI is instantiated from the shadow DOM (when styles should instead be inserted into the shadow DOM container)
Solution
We need to do the following:
- Either:
- Attempt to automatically detect when EuiProvider is instantiated within a shadow context, or
- Allow consumers to pass us a prop that says EUI is being used within shadow DOM (my strong preference, as far less will go wrong this way)
- Add our own
<GlobalOrHost /> component that returns a global if not shadow DOM, and a :host stylesheet/selector if shadow DOM
- Require consumers to pass us their Shadow DOM container/root (required for us to append styles to the correct location)
TO INVESTIGATE: Will absolutely or fixed positioned items like headers & flyouts still work as expected? Is the shadow DOM iframe-like in behavior in that regard?
Other resources/reading:
Problem
Currently, EUI uses several Emotion
<Global />components which inject styles directly into the head:eui/src/global_styling/reset/global_styles.tsx
Line 122 in 3ab325b
eui/src/global_styling/utility/utility.tsx
Line 156 in 6ce9208
eui/src/components/overlay_mask/overlay_mask.tsx
Line 103 in f516c12
eui/src/services/theme/provider.tsx
Line 228 in 72b509a
This head insertion occurs even when EUI is instantiated from the shadow DOM (when styles should instead be inserted into the shadow DOM container)
Solution
We need to do the following:
<GlobalOrHost />component that returns a global if not shadow DOM, and a:hoststylesheet/selector if shadow DOMTO INVESTIGATE: Will absolutely or fixed positioned items like headers & flyouts still work as expected? Is the shadow DOM iframe-like in behavior in that regard?
Other resources/reading: