Support instantiate Component on standard HTML elements?

CanJS
1

Currently can.Component supports custom tags only , but am wondering whether components will eventually support being instantiated by Attribute or CSS class as some other frameworks do. Really attribute support is one that I would like to see the most.

A case for this would be list items where the CSS is standardized and you would like to use for standard components such as li elements in bootstrap:

When using the following any CSS for li elements will not work:

<my-parent-component>
    {{#each someCollection}}
        <my-component {some-value}="."></my-component>
    {{/each}}
</my-parent-component>

Something as below would be much easier to work with if possible since the component template/scope and viewModel would exist within an actual li element.

<ul my-parent-component>
    {{#each someCollection}}
        <li my-component="."></li>
    {{/each}}
</ul>

I know that can.view.attr has the ability to add logic to standard HTML elements, but lacks the power and features of Components such as viewModel/events etc from what I have currently seen.

As always, thank you for your help…

2

I think this is a requested feature (some issue in github). It’s not currently supported. On the surface, it’s fairly easy … allow a can.view.attr to get the subtemplate (the user supplied content).

However, what do you do when there are two components on the same element? Only one should probably get the user supplied content.

You can already have a can.view.attr instantiate a component. The component just can’t have any light/user dom.

3

Components without wrapping tag would be an option. Though not sure if it is really needed.