Webcomponents: [templates] Consider ${foo} instead of {{foo}}

[jdanyow]

Proposal: align the interpolation syntax with JavaScript.

https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Template-Instantiation.md

[annevk]

Context: https://tc39.github.io/ecma262/#sec-template-literal-lexical-components.

[matthewp]

The disadvantage to choosing the same syntax as JavaScript is that it makes it more difficult to create templates as template literals in JavaScript (you have to remember to escape them all). For ex:

template.innerHTML = `
  <h1>\${name}</h1>
  <h2>${title}</h2>
`;

Would throw assuming title is not in scope b/c you forgot to escape it. If it were in scope you might be scratching your head as to why the templates were not behaving as you expected.

[kafein]

I think its problematic to use fixed syntax. Programmers should able to set custom interpolation syntax. Some server side templating engines uses nearly same {{ var }} syntax and this may cause conflicts when javascript code mixed with template code.

[rniwa]

I don't think we want to make this configurable. That's one thing this standardization process provides: uniform templating syntax.

If we're going with ${~}, we probably need an alternative syntax so that it could be used inside JS without having to escape as pointed out in https://github.com/w3c/webcomponents/issues/688#issuecomment-341465220. This was pretty much the reason we went with {{~}}.

{~} is also problematic because it appears in CSS, and you'd sure want to be able to embed CSS inside a template.

[tabatkins]

Neither {~} nor {{~}} should cause any problems in CSS, unless I'm very confused.

[rniwa]

<template><style> :host { font-weight: bold; } </style></template> would blow up unless we escape { inside the style element.