Shadow Boxing

A lot of people like certain things about Shadow DOM, but not other things. From what I have seen, this is especially difficult for two big reasons:

The second is especially snarly because while we can look to other examples and paradigms, we've never "done" exactly this before. Ideally this would involve some experiments and trying to spend some significant time trying out what each reality is like in practice. That's the best way to know how good or bad a solution really is.

What if we punch a hole in the Shadow DOM?

It definitely seems to me that there are a number of people suggesting that they would use Shadow DOM "if only" you could make a stylesheet apply 'all the way down'... Somehow. They are, again, not all the same use cases - but it seems... possible to try.

So, let's try that. In fact, let's try a few variations. Here is a small (< 100 LoC) library that supports 4 different "modes" for us to explore various use cases.

You just gotta include it early... 

<script src="/shadow-boxing.js"></script>

Then add a shadow-style-mode attribute to your html element with one of the supported values. For now, let's choose <html shadow-style-mode="page-push-marked">

And all it does is watch for something to attach a shadow, and copy any <style> or <link> elements into the root, as long as they have a shadow-import attribute on them.

That's it. It's the whole idea.

This means you can write something like.. 

<style shadow-import>
  h1 {
    color: pink;
    background: black;
    padding: 1rem;
  }
</style>

And those styles will automatically apply to any (open) Shadow Roots, regardless of depth or who created them. You, as the author of the page take responsibility to say "yes, I really meant to do that".

The pink and black <h1> treatments below are in nested web component Shadow DOMs of two components and inside that is a third with it's own style for font-color, so you can see how they all play together. Inspect the DOM, look around.

You can read more about the supported modes from the github repo.

Cool Polyfill, it doesn't work for {x}

First, let's be very clear: This is not a polyfill of anything currently, and if it was it would be a bad one. There are so many ways you could break this if you tried to do anything remotely ambitious.

But, a lot of stuff isn't ambitious in those ways, and this is potentially a decent enough way for lots and lots of the common cases people have to explore what that might actually be like. And, yeah - my guess is a lot of people will be like "sweet, that's exactly what I wanted" and another group of people will be like "oh... hmm... ok yeah, I guess I didn't think about this thing I am now experiencing".

So what's your goal with this?

Hopefully it inspires people to try different things, and maybe we'll get some actual data that helps us see what would make people happy or sad? That's it. If this suddenly shows up in a whole bunch of places, that's pretty worth paying attention to.