feat: add lower bound encapsulation

[pemrouz]

There are two types of CSS encapsulation the shadow DOM provides: upper bound and lower bound. For browsers that don't support shadow encapsulation, the former is easy to solve via component name prefixing. The latter is near impossible to solve in a performant way. This is why I've generally been advising to use the child (>) selector over the descendent ( ) selector to avoid leaking styles to children. Components have a known structure and it's usually very rare that authors actually intend to say "match from here to infinity". This should also be faster. In retrospect, the ubiquitous use of the descendent selector over the child selector is mostly just a product of bad habits imho.

However, there is a proposal in vercel/next.js#249 that would potentially solve this problem in a performant way. We already transform styles AOT, but the additional concept is to tag each element with it's direct parent which would help limit applying styles to non-direct children elements.

/cc @rauchg who came up with the idea and we discussed a few aspects with.

The only thing I'm not sure about is the API surface. Ideally it should be another render middleware:

// per-component
export default encapsulate(function component(node, data){
  ..
})

// or globally
ripple.draw = encapsulate(ripple.draw)

However, need to see if would be more performant to do this at the once helper function level.