Lit-html: Attribute parts does not work with hard-coded strings

[kaaninel]

Description

A clear and concise description of what the bug is.

Steps to Reproduce

1. Write this code

// Does not work
html`<ui-hello-world @click="${this.Test}" .Text="But Why"></ui-hello-world>`

// Works
html`<ui-hello-world @click="${this.Test}" .Text="${'But Why'}"></ui-hello-world>`

Expected Results

It should set Text property of instance created by lit.

Actual Results

Lit does not process .Text attribute and it stays in dom like .text="but why"

Browsers Affected

• [ x] Chrome
• [ ] Firefox
• [ ] Edge
• [ ] Safari 11
• [ ] Safari 10
• [ ] IE 11

[jsilvermist]

AFAIK this is the expected behavior and the second syntax is the recommended way to do it. Only bindings are parsed by lit due to performance and design reasons.

[Westbrook]

lit-html will only bind onto attributes with dynamic expressions in their value. So when you use .Text="But Why" lit-html won't even read into the statement to decide whether you're intending to use a property or an attribute. In the case that you're actually binding simple data like this (a String), I suggest you get around this issue by relying on standard attribute binding: Text="But Why".

Doing so with LitElement
If you're created the Test property in the static get properties() of your ui-hello-world element, the element will automatically pass the value of the Test attribute to the property of the same name for you.

Doing so with Vanilla Element
If you are working with a vanilla custom element, you can add the Text attribute to your static get observedAttributes():

static get observedAttributes() {
    return ['Text'];
}

And then pass that attribute data to the property internally via an attributeChangedCallback:

attributeChangedCallback(name, oldValue, newValue) {
  this[name] = newValue;
}

Complex Data Structures
In the case that you're using complex data structure (an Array or Object) you'll want to us a dynamic binding to begin with .Text="${yourComplexData}" so at to maintain the identity of your data. In this case your data would not be shared between the attribute and property of the shared name unless you were to manually do special handling interior to your element.

[ruphin]

As mentioned before, lit-html does not process your HTML in any way, and anything outside dynamic bindings is left untouched. This is by design, and it is not an issue.

If you want to assign to properties declaratively, you can absolutely use this:

html`<div .prop=${ "value" }></div>`

This will only set the property once during the initial render, and does nothing on consecutive renders.