automatically propagate id and class on components to the element the component is bound to

[monsanto]

I've been working on a Ractive component for the Ace editor. At the moment, if I want to style it with CSS, I have to manually proxy the id and class elements, so I can support syntax like

<ace id="foo" ... />

In my opinion, it would be more useful if these properties were automatically propagated to ractive.el (perhaps a setting could be added to turn off this behavior). Otherwise every component writer will have to manually proxy them so their components can be styled.

This would effectively make id and class "reserved attributes", but I would expect them to be anyway--if a component author repurposed these attributes that would be very confusing.

Thoughts?

[Rich-Harris]

I think I see what you're getting at here - have I understood this correctly?

<ace id='foo' class='bar' content='{{whatever}}'/>

<!-- with a basic template this... -->
<div></div>

<!-- ...translates to something like this... -->
<div id='foo' class='bar'></div>

<!-- ...which after initialisation looks something like this -->
<div id='foo' class='bar ace_editor ace_nobold ace-twilight ace_dark'>
  <!-- ace editor controls the DOM in here -->
</div>

As opposed to having to have a template like this:

<div id='{{id}}' class='{{class}}'></div>

I'm a bit hesitant, for three reasons. Firstly, a component template could have several top-level elements - the class name could propagate, but the id couldn't, because then you'd have multiple elements with the same id. So there would need to be a set of rules about what should propagate where. Secondly, it adds a chunk of complexity - if a template element already has a class name (which might be dynamic), then making sure that it also includes whatever class name the component itself has (which again, might be dynamic) means adding a whole load of 'special case' logic.

Thirdly, it means adding complexity to the API (the id/class exception wouldn't be obvious, it would be one of those things that you have to learn about through documentation and remember) without adding new functionality (since id='{{id}}' may look clumsy, but works perfectly well).

So my inclination is to close this as wontfix, I'm afraid. Having said all that I do understand where you're coming from - do let me know if I've misunderstood the proposal or if you disagree with the points above.