Re: [w3c/webcomponents] Support /deep/ in static profile (bugzilla: 28591) (#78)

Essentially, we have a [small core](https://github.com/rijs/fullstack#ripple) that stores (browser-like) resources and emits an event when they change. 

```js
ripple(name)       // getter
ripple(name, body) // setter
ripple.on('change', (name[, change]) => {})
```

Other modules like the [view layer](https://github.com/rijs/components#ripple--components) simply listens for changes and updates anything on the page that is affected. For example, components are simply [transformation functions of data](https://github.com/pemrouz/vanilla#vanilla), so registering a new version of a component would redraw all instances of that custom element. This amounts to the following:

```js
ripple.on('change', name => document.querySelectorAll(name).map(d => d.draw())) 
```

Other types of resources may also change, such as stylesheets or data, and the view layer would use different selectors (`[css~="${name}"]` and `[data~="${name}"]`) to find all the instances that need updating.

Now, since there may be relevant custom elements to update in the shadows of other custom elements (majority case), instead of `document.querySelectorAll(name)` a small utility is used to search across all shadow roots if the browser supports it.

Being able to use `querySelectorAll` to identify matching elements to update across the application results in a super-eloquent solution that lets the browser handle this robustly. Without this basic affordance, you would need to spawn your own DOM-like structure to keep track of things which would be very painful and kill interoperability.

---
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3c/webcomponents/issues/78#issuecomment-222849682