Sidecar CSS encapsulation idea

[bessey]

I have been playing with View Components for the first time the past week, mostly to see if I could get anywhere close to the good bits of the React dev experience. One part I do like about that world is styled components / emotion / in general the CSS In JS movement. However, its not the "in JS" part I like, it's just the fact there's good solutions for encapsulating the styles for a specific component.

From the docs today, the only suggestion I see for automating this is with Web Components. After playing with this for some time I dismissed this as a viable approach for a few reasons, some of which have workarounds:

1. Shadow DOM is a little too good at encapsulation. I want global styles to cascade, i just don't want component specific styles to cascade
2. Having to have globally unique names for each element is tiresome
3. The JS boilerplate for each component seems significant
4. If I want to do anything with view component slots, I also need to duplicate that architecture in my web component's own slots

Instead, what I wanted to try was automatically encapsulating the CSS associated with a template, just using convention over configuration. I succeeded! My approach is, when rendering a given View Component...

1. At render time, automatically wrap the output HTML with a surrounding HTML element
2. At render time, automatically set a class on that element, which is derived from the component's Ruby fully qualified class name
3. In the component's sidecar CSS, the dev nests the CSS they want to isolate in a ::component selector (this is valid if useless CSS, its a pseudo-element selector)
4. With a webpack loader, automatically replace that selector with the previously CSS class derived from the View Component's class name

Hopefully you can see where I'm going with this. The result is "magically" encapsulated CSS, without writing any JS. I was able to achieve a pretty good proof of concept of this with nothing but a snippet of Ruby and a wee custom webpack loader. It has niceties like the ability to disable the automatic wrapping to instead allow the dev to manually choose the element in the HTML where the encapsulation class can go, without adding more HTML elements. It also allows referring to other components' encapsulation classes from within CSS with ::component("example/path/to/my_component") { ... } which I imagine could be useful for tweaking the styles of a component in a certain context.

This is all in private repo so I will need to extract to a clean Rails install and do a write up before I can share it, but I was too excited to hold off posting 😅! This is now published for all to see. Has anyone else tried something similar already? This seems like such a powerful technique to me, it might be worth considering standardising and including in the library itself.

[jaredcwhite]

That sounds like an interesting technique! Something you could try as an alternative is to use a custom element rather than a generic div class. (FYI not talking about web components per se.)

So for instance:

Forms::DropdownComponent

might map to

<component-forms-dropdown>

and in CSS:

component-forms-dropdown { color: green }

Does that provide enough specificity/encapsulation for you?

[bessey]

I did take a look at custom elements but concluded they didn't fit the bill entirely, as unlike web components they don't seem to support contents, only attributes i.e. <component-forms-dropdown text="stuff"/> is fine but <component-forms-dropdown>stuff</component-forms-dropdown> is not possible, is that incorrect?

[jaredcwhite]

Well custom elements are display: inline by default, so it's possible you saw some wonky presentation. Otherwise, it supports child nodes just fine, no slots or JS of any kind required.

[bessey]

Ah, I misunderstood the MDN docs then. I will play around further.

[joelhawksley]

@bessey thanks for taking the time to write this up!

We're in the process of building out a prototype internally for the kind of encapsulation you're proposing here, but it's quite experimental and not yet ready to see the light of day 😅 . I'm hoping to share more in this area in the next couple of months ❤️

[Spone]

@bessey in case you missed it, here is the proposal: #677

[bessey]

Ok, I extracted the proof of concept from a private repo into a clean Rails repo, the README links to the PR that adds the interesting bits, its only a couple hundred lines for those interested!

https://github.com/bessey/rails-css-component-techniques