Lit-html: Clarify usage of quotes in declarative bindings

[MaKleSoft]

Its looks like

<my-element .prop=${prop}></my-element>

and

<my-element .prop="${prop}"></my-element>

produce the same results but it's unclear if and how the use of quotes changes the behavior of the binding. If this is documented somewhere, I haven't seen it. I've seen both versions used in documentation [0][1] without any explanation of what the differences are or which syntax is recommended:

[0] https://github.com/Polymer/lit-element#a-simple-base-class-for-creating-custom-elements-rendered-with-lit-html
[1] https://polymer.github.io/lit-html/guide/writing-templates.html#binding-types

[markcellus]

Yeah, I brought this same thing up in the lit-html slack channel the other day. The response I got doesn't really explain the differences, but it at least helped me understand which way is recommended going forward.

[aadamsx]

Can I get an invite to this channel? [email protected]

[MaKleSoft]

For reference (since not everyone has access to the slack channel):

mark [3:55 PM]
should we be using quotes when declaring bindings? Or are they optional? If optional, is this temporarily the case? Or will one of them no longer be supported in the future? I know its hard to see into the future, but I'd like to avoid having to refactor something like this later on, which is generally hard to regex a search and replace for :sweat_smile:

43081j [4:02 PM]
@mark you don't need them and afaik its recommended you don't have them

Would be nice to get an official answer though. Also, I'm not sure how I feel about leaving syntax choices up to individual preference. Look where that got us with javascript...

[justinfagnani]

The "official" answer is that quotes only matter if you have an interpolation of expressions and string literals. Like HTML, the quotes are optional in lit-html in some situations. This is because we just use the browser's HTML parser.

[abraham]

@aadamsx you can Join the Polymer slack here: https://polymer-slack.herokuapp.com/

[akc42]

Currently the vscode lit-html syntax highlighter doesn't highlight unless the quotes are there. So I am using them regardless. I hope this is the right thing?

[keanulee]

You can always safely use quotes (we use them by convention in pwa-starter-kit). As mentioned above, In some cases, HTML will handle no quotes as well; some of our examples in documentation are like this since it's more concise.