half-light
Evolving ideas on "open stylable" issues, a new proposal.
Recently I wrote a piece called Lovely Trees in which I described how the Shadow DOM puts a lot of people off because the use case it's designed around thus far aren't the one most authors feel like they have. That's a real shame because there is a lot of usefulness there that is just lost. People seem to want something just a little less shadowy.
However, there are several slightly different visions for what it is we want, and how to achieve it. Each offers significantly different details and implications.
In that piece I also noted that we can make any of these possible through script in order to explore the space, gain practical experience with and iterate on until we at least have a pretty good idea what will work really well.
To this end I offered a library that I called "shadow-boxing" with several possible "modes" authors could explore.
"Feels like the wrong place"
Many people seemed to think this would be way better expressed in CSS itself somehow, rather than metadata in your HTML.
There is a long history here. Originally there were combinators for crossing the shadow boundary, but these were problematic and removed.
However, the fact that this kept coming up in different ways made me continue to discuss and bounce possible ideas around. I made a few rough takes, shared them with some people, and thanks to Mia and Dave Rupert for some good comments and discussion, today I'm adding a separate library which I think will make people much happier.
Take 2: half-light.js
half-light.js is a very tiny (~100 LoC) library that lets you express styles for shadow doms in your page in your CSS (it should be CSS inline or linked in the head). You can specify whether those rules apply to both your page and shadow roots, or just shadow roots, or just certain shadow roots, etc. Let's have a look.. All of these make use of CSS @media rules containing a custom --crossroot which can be functional. The easiest way to understand it is with code, let's have a look...
Rules for shadows, not the page...
This applies to <h1>'s in all shadow roots, but not in the light DOM of the page itself.
@media --crossroot {
h1 { ... }
}Authors can also provide a selector filter to specify which elements should have their shadow roots affected. This can be, for example, a tag list. In the example below, it will style the <h2>'s in the shadows of <x-foo> or <x-bar> elements, and not to those in the light DOM of your page itself...
@media --crossroot(x-foo, x-bar) {
h2 { ... }
}Most selectors should work there, so you could also exclude if you prefer. The example below will style the <h3>'s in the shadows of all elements except those of <x-bat> elements ...
@media --crossroot(:not(x-bat)) {
h3 { ... }
}Rules for shadows, and the page...
It's really just a trick of @media that we're tapping into: Begin any of the examples above with screen, and put the whole --crossroot in parenthesis. The example below styles all the <h1>'s in both your light DOM and all shadows...
@media screen, (--crossroot) {
h1 { ... }
}Or, to use the exclusion route from above, but to apply to all <h3>'s in the page, or of shadows of all elements except those of <x-bat> elements ...
@media screen, (--crossroot(:not(x-bat))) {
h3 { ... }
}Play with it... There's a pen below. Once you've got an impression, give me your impression, even with a simple Emoji sentiment or short comment here.
See the Pen halflight by вкαя∂εℓℓ (@briankardell) on CodePen.
Is this a proposal?
No, not yet, it's just a library that should allow us to experiment with something "close enough" to what "features" a real proposal might need to support, and very vaguely what it might look like.
A real proposal, if it came from this, would certainly not use this syntax, which is simply trying to strike a balance between being totally valid and easy to process, and "close enough" for us to get an idea if it's got the right moving parts.