Emotion and Shadow DOM support

[cee-chen]

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

return <Global styles={styles} />;

eui/src/global_styling/utility/utility.tsx

Line 156 in 6ce9208

return <Global styles={globalStyles(euiTheme)} />;

eui/src/components/overlay_mask/overlay_mask.tsx

Line 103 in f516c12

<Global styles={euiOverlayMaskBodyStyles} />

eui/src/services/theme/provider.tsx

Line 228 in 72b509a

<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:

1. Either:
   1. Attempt to automatically detect when EuiProvider is instantiated within a shadow context, or
   2. 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)
2. Add our own <GlobalOrHost /> component that returns a global if not shadow DOM, and a :host stylesheet/selector if shadow DOM
3. 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:

• Original comment from @tkajtoch raising shadow DOM support: [EuiHeader] Set up CSS variable for fixed header affordance; [Emotion] Set up CSS variable architecture #7151 (review)
• Support for ShadowDom emotion-js/emotion#388 (comment)
• Styling shadow dom. emotion-js/emotion#1366

[JasonStoltz]

We're labeling this as a low priority for now, as nobody has requested shadow DOM support. Please leave a comment if this is important for your use case and we will reconsider.

[github-actions]

👋 Hi there - this issue hasn't had any activity in 6 months. If the EUI team has not explicitly expressed that this is something on our roadmap, it's unlikely that we'll pick this issue up. We would sincerely appreciate a PR/community contribution if this is something that matters to you! If not, and there is no further activity on this issue for another 6 months (i.e. it's stale for over a year), the issue will be auto-closed.

[github-actions]

❌ Per our previous message, this issue is auto-closing after having been open and inactive for a year. If you strongly feel this is still a high-priority issue, or are interested in contributing, please leave a comment or open a new issue linking to this one for context.