Is there any way to reference Emotion stylesheet in adoptedStylesheets, or at least have a way to hook into style updates?

[pearcake]

Hi, basically the title. I need to share Emotion styles between two web components with shadow dom, but the closest I've got to getting to style values and syncing their updates with adopted stylesheet was hooking into "stylis plugins", but that doesnt seem to be a robust solution. Is there any way I can pull this off, or does that require changes to the library?

[sunnypatell]

@pearcake emotion has no native adoptedStyleSheets support. it only works with <style> tags injected into a container node. the container option on createCache lets you target a shadow root, but each root gets its own duplicated style tags, no sharing.

the cleanest way to bridge emotion into adoptedStyleSheets is intercepting cache.sheet.insert to mirror every rule into a shared constructable CSSStyleSheet:

import createCache from '@emotion/cache'

const adoptable = new CSSStyleSheet()

const cache = createCache({
  key: 'shared',
  container: document.createElement('div'), // detached, avoids polluting document
  speedy: false, // avoids tag.sheet being null on detached containers
})

const origInsert = cache.sheet.insert.bind(cache.sheet)
cache.sheet.insert = (rule: string) => {
  origInsert(rule)
  try { adoptable.insertRule(rule, adoptable.cssRules.length) } catch {}
}

then in your web components:

class MyWidget extends HTMLElement {
  connectedCallback() {
    const shadow = this.attachShadow({ mode: 'open' })
    shadow.adoptedStyleSheets = [adoptable] // shared across all instances
    // render React with <CacheProvider value={cache}>
  }
}

this is better than stylis plugins (which run at compile time, before insertion, so they can't produce CSSStyleSheet objects) and better than MutationObserver on style tags (async timing, flashes on first render).

a few gotchas:

• speedy: false is needed because detached containers have tag.sheet === null (#2053)
• safari 15.0 has a WebKit bug with shadow DOM styles (#2508), fixed in 15.1+
• there was an open request for custom StyleSheet class support but it was closed when monkey-patching proved sufficient

if shadow DOM is a core requirement and you're not locked into emotion, Lit's css tagged template uses adoptedStyleSheets natively with automatic cross-shadow-root sharing.

ref: @emotion/cache docs | shadow DOM support #388 | MDN adoptedStyleSheets