I’ve expressed my love of the Light DOM recently. In Web Components land, there are plenty of reasons to stick with it, but admittedly, there is stuff you’re giving up by not using Shadow DOM. The biggest to me is the usage of slots which is a nice way to handle HTML abstraction. Why my distaste for Shadow DOM? Mostly styling!
So what if you could have all the benefits of Shadow DOM and be able to very easily style though it with regular CSS? That’s literally what I want. Looks like Brian Kardell has a brand new library to allow for exactly this: half-light.js. (A quick evolution of his shadow-boxing library.) I’d prefer it at the platform level, but hey, 100 lines of code is great.
half-light.jsis 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.
