Space inside {{ }}

[Paulmicha]

In the following example :

<to-do-item>
  <p class=text>{{ item.value }}</p>
  <button class=delete onclick={{deleteItem}}>-</button>
</to-do-item>

The space here seems allowed : {{ item.value }} but not onclick={{ deleteItem }} - is that something worthy of supporting, or at least, could it be mentioned in the README ?

[WebReflection]

@Paulmicha actually no, that's how HTML works, if you have an attribute with spaces you gotta put double quotes around or the whole HTML is screwed.

example

const template = document.createElement('template');
template.innerHTML = `<to-do-item>
  <p class=text>{{ item.value }}</p>
  <button class=delete onclick={{ deleteItem }}>-</button>
</to-do-item>`;
document.body.appendChild(template.content);
console.log(document.body.innerHTML);

That produces:

<to-do-item>
  <p class="text">{{ item.value }}</p>
  <button class="delete" onclick="{{" deleteitem="" }}="">-</button>
</to-do-item>

So, the onclick="{{" becomes the attribute, deleteitem="" becomes another one, and }}="" becomes an attribute too ... your IDE should've warned you the layout wasn't working as meant, and as here everything follows standards, there's not much I can do about how standards work, since there's also no pre-propcessor, and the template is retrieved through the node as you write it.

[WebReflection]

P.S. yes, a note in the README might be useful, thanks

[WebReflection]

P.S. 2 ... I see if I can get some workaround but generally speaking, attribute={{ thing }} doesn't produce what you'd expect

[WebReflection]

P.S.3 nope ... the camelCase is lost once deleteItem is considered an attribute ... so yeah, no spaces, or quotes around would do.

[Paulmicha]

Thanks ! I can confirm this works (based on testing locally the "uce-template-todo-2020" repo using npm run debug) :

<to-do-item>
  <p class="text">{{ item.value }}</p>
  <button class="delete" onclick="{{ deleteItem }}">-</button>
</to-do-item>

[WebReflection]

just FYI, single quotes would be fine too, as actually HTML accepts both, in case you didn't know it (and also 'cause I've mentioned double quotes, but single is fine too)

<to-do-item>
  <p class=text>{{ item.value }}</p>
  <button class=delete onclick='{{ deleteItem }}'>-</button>
</to-do-item>