Defining a scoping inner-boundary in CSS
Concretely, I want to implement simulated CSS scoping for react-shade. This uses the imperative Shadow DOM APIs, by default, to enable scoping on the client. However, in order to get fully-scoped CSS when using SSR, we need either:
- A declarative API for shadow DOM (closed due to lack of implementer interest), or
- A way to tell CSS to stop selecting elements in slots. So, we'd need to be able to select between an ancestor and a descendant in a given DOM tree.
I am currently able to find solutions for
:host-context, and can scope stuff to descendants of a shadow root tree, the hard part is just simulating the exclusion of slotted content.