Exposing a way to clone a `StyleSheet` instance

Is your feature request related to a problem? Please describe. This would benefit use cases such as rendering multiple instances of the same Custom Element (where each instance has its own shadow root and you can’t use styles from outside the shadow root) whilst only generating styles once and then simply re-injecting them into different insertion points (one per shadow root).

Related to https://github.com/cssinjs/react-jss/issues/297.

Describe the solution you’d like I’m not sure what the best solution would be, but this potentially could be achieved via caching sheet.toString() or sheet.renderer.element.cloneNode() somehow.

I have a repro with 1000 instances of Material-UI Button component wrapped in a Custom Element here: https://codesandbox.io/s/5vx8yoooyx. You can see that displaying 1000 buttons is somewhat sluggish, and I believe it is to do with there being a lot of JSS work being redone for each button.

Are you willing to implement it? Yes.

[kof]

and this https://www.w3.org/TR/css-shadow-parts-1/

[kof]

Make sure to watch this https://github.com/WICG/construct-stylesheets it will fix the problem of sharing styles across shadow roots