dashkite/rio

More Flexible Styles Mixin

Closed this issue · 1 comments

Right now, the styles mixin requires rules with selectors of the form:

<tag> :host <selector>

This is pretty limiting. For example, you can't select for an ID or for a component within another element. What we can do instead is scan for any :host selectors, and attempt to find the element(s) referenced by the selector up to the :host selector. If one of those elements matches the current element, we pull it in to our styles, using everything after the :host selector (which is what we already do, so that part is easy).

We can also use MutationObserver to update all component import stylesheets, rather than doing that when we render, which makes it impossible to add or remove content.

new MutationObserver (mutations) ->
  # update styles...
  .observe document.documentElement,
    childList: true
    characterData: true
    subtree: true

Decided that the styles mixin is a misfeature.