Copy attributes on <template> to <router-view> and <compose>

[thomas-darling]

I'm submitting a feature request

When creating a custom element, any attributes placed on its <template> element will be copied to the actual element. I'd like to see the same behavior for views presented in a <router-view> or using <compose>.

Current behavior:

Currently, attributes placed on the <template> element are completely ignored when the view is presented in a <router-view> or <compose> element.

Expected/desired behavior:

• What is the expected behavior?

  The attributes placed on the <template> element of a view presented either in a <router-view> or using <compose>, should be copied to that <router-view> or <compose> element - exactly the same behavior as what is currently implemented for custom elements.

  Attributes or styles should not be overwritten - i.e. if an attribute or style is specified on both the <template> element and on the <router-view> or <compose> element, then the attribute should not be copied - exactly the same behavior as what is currently implemented for custom elements.

  When the view is changed/removed, any attributes, class names or styles that were added should be removed, thus reverting the <router-view> or <compose> element to its original state - this is, I believe, the only difference compared to custom elements.

• What is the motivation / use case for changing the behavior?

  This was previously discussed here: https://github.com/aurelia/framework/issues/139#issuecomment-269750536

[AdamWillden]

Incidentally this would go some way to address issue https://github.com/aurelia/templating/issues/505 which was closed. Linking in case someone finds that looking for the same enhancement.

[Alexander-Taran]

I guess the hard part is that surrogate behaviors could change from one view to another. And the difficulty is when router-views view changes - removing previous surrogate behaviors. Same goes for the compose.

[EisenbergEffect]

For vNext I'm thinking of making router-view and compose work a little different, by actually generating a custom element for each composition. In that case, when we generate it, we could copy attributes over. I don't think we can do it with the current design, at least not easily or in a clean way.

[davidlav]

For anyone else finding themselves here because the lack of surrogate behaviors doesn't allow for easy styling of custom elements used as route views (as any identifying attributes on the

<router-view id.bind="router.currentInstruction.config.name"></router-view>

This at least alleviates the worse hack of wrapping everything inside of the <template> in a redundant, inner <div> (which itself would have some identifying attributes for the CSS to hook onto).