treshugart/README.md

## README.md

      
    Raw
  

              README.md
            
          
    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 and :host-context, and can scope stuff to descendants of a shadow root tree, the hard part is just simulating the exclusion of slotted content.
Notes


The content in the slot is meant to represent slotted (light DOM) content as this is how it would have to be SSR'd.
When applying simulated scoping, the CSS in <style> would be transformed so that it would do so.


## example.html
<p class="title">Should *not* be styled by `.title`. This is fairly simple by prefixing `.title` with a something unique to the root.</p>
<root>
  <style>
    /* This is how it would be written by a consumer. */
    .title { ... }

    /* This is how it could be transformed to scope to the root. */
    [__root_scope="1"] .title { ... }

    /* Unsure how we transform it to only apply between the root and the slot. Just a thought for the sake of an example... */
    [__root_scope="1"] .title:stop-cascading-at(slot)
  </style>
  <p class="title">Should be styled by `.title`. As mentioned above, this is pretty straight forward.</p>
  <slot>
    <p className="title">Should *not* be styled by `.title`. This is the hard part.</p>
  </slot>
</root>
	<p class="title">Should not be styled by `.title`. This is fairly simple by prefixing `.title` with a something unique to the root.</p>
	<root>
	<style>
	/* This is how it would be written by a consumer. */
	.title { ... }

	/* This is how it could be transformed to scope to the root. */
	[__root_scope="1"] .title { ... }

	/* Unsure how we transform it to only apply between the root and the slot. Just a thought for the sake of an example... */
	[__root_scope="1"] .title:stop-cascading-at(slot)
	</style>
	<p class="title">Should be styled by `.title`. As mentioned above, this is pretty straight forward.</p>
	<slot>
	<p className="title">Should not be styled by `.title`. This is the hard part.</p>
	</slot>
	</root>