Scoped css

[nevf]

I am currently using Riot.js in my Web App Clibu and like the look off slim.js, especially as it doesn't require a compile step and child component access seems simpler.

Riot.js enables css to be specified along with the component markup, scoping it to the component.

I couldn't see any mention of css in your doc's - is this possible?

[eavichay]

Using SHADOW DOM plus adding your style node into your markup is the way to go.

import { useShadow } from 'slim-js/Decorators';

@tag...
@template... (including style node)
@useShadow(true)
class MyComponent extends Slim {
...
}

[David-Mulder]

Except that this won't work in IE11 which is still commonly supported :'( ShadyCSS support would be nice.

[eavichay]

Basically, if you use ShadyCSS you can always trigger the applyShadyCss on your element in the 'onRender' function. I think that a shady-css "polyfill" can be added (externally) as an optional file in slim.js package, as the actual file size is critical. Simply override the base class' connectedCallback and add the shadyCss apply trigger.

WDYT?

[David-Mulder]

Will have to take a look at the applyShadyCss function, didn't realize that was possible as well.

[eavichay]

I will add automatically invocation of shadyCSS on the connectedCallback, but polyfills must be loaded beforehand for performance...