Riot: [FEATURE REQUEST] "is" directive enhancement

[dharmax]

Is your feature request related to a problem? Please describe.
The "is" directive is very powerful and useful. However, the way it works - by inserting the body of the referred component without the enclosing tag outer node - makes CSS styling less elegant. Let me explain:

Normally, i use an external file (sometimes one) for all non-generic app components, using LESS or SCSS. Now, when i refer to a component, it would normally be using the component name (e.g. "login-box") as the selector. Now, if the component is being inserted into the DOM using the "is", there would be no "login-box" element in the DOM and the styling wouldn't be applied.

Describe the solution you'd like
Either change the "is" to include the enclosing node ("login-box" in the above example) or add a directive called, say "is-explicit" that would do that and thus provide both options.

Describe alternatives you've considered
i add an extra enclosing node (".login-box") and use it in the selector. It is not a perfect solution, because if a component is used in both ways, the styling could be rather problematic.

Additional context
Add any other context or screenshots about the feature request here.

[sourcegr]

Why dont you try

login-box, [is="login-box"] {width:100%; ....}

[dharmax]

@sourcegr good temporary solution. It would be back-compatible with the future fix if there would be one.

Note, though: attribute based selectors are the heaviest selectors, performance-wise.

[GianlucaGuarini]

@dharmax I think the solution provided by @sourcegr is the simplest and most elegant possible. However there are plenty of other possibilities that you can explore without addressing the issue to the framework. I don't have any plans to change this behavior in the near future but thank you anyway for your proposal.