saving referenced inline styles results in weird x's

[darvid7]

With the below code snippet, when I try save the file in VS Code it changes ${appleStyles} to a bunch of x's

// Before pressing save
const appStyles = "background-color: black;";
const template = html`<div style=${appStyles}></div>`
render(template, document.body);

// After pressing save
const appStyles = "background-color: black;";
<div style=xxxxxxxxxxxx></div>
render(template, document.body);

[OmidHekayati]

I have the same problem after update to last version od vsc and lit-html, any news?

<div class="card" style="display:${this.showMenu ? '' : 'none'};">
<!-- change to this when use VSC format document -->
<div class="card" style="display: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx;">

Test on lit-html 1.11.0 & 1.10.0 and get same result. But I notice that this problem is not on all my files but I can't find the rules!

[davidnx]

+1. This also happens when the attribute interpolation has surrounding quotes:

return html`${this._style()}<div class="container" style="${"abc:1"}"></div>`;

After VSC Format:

return html`${this._style()}<div class="container" style="xxxxxxxxxx"></div>`;

Tested on lit-html extension 1.11.0 with VS Code 1.34.0.

[OmidHekayati]

I had found a solution to our problem but I forget to comment here! Just we must respect lit-HTML bind properties to child elements that describe here!
https://lit-element.polymer-project.org/guide/templates#bind-properties-to-child-elements

In all example above, we must add a leading dot e.g.

<div .style="display:${this.showMenu ? '' : 'none'}; >"

or add leading question mark if we have boolean attributes e.g.

`<dialog ?open=${this.dialogOpen} >

So I think this issue can be closed now!

[davidnx]

@OmidHekayati interesting work around, but not the solution. It is not acceptable for the "Format Document" command to garble syntactically-valid source.

1. style is a proper HTML attribute and should not require property syntax (leading dot .style="..." as suggested).
2. Even if style=${...} were semantically invalid at runtime, replacing it with xxxx is never reasonable.

[OmidHekayati]

Dear @davidnx please send a real code due to your first example style="${"abc:1"}" is not a real situation.
and answer to:

1. Yes style is a proper HTML attribute but if you don't use "." for it in below example if this.showMenu don't return proper data it will add display without any value that is an error! but in dot situation, it will remove it if display has no valued!

<div .style="display:${this.showMenu ? '' : 'none'};" >
<div style="display: ;" >
<div style="" >

2. when you need nested quotes """" you must use nesting single quotes within double quotes or reverse "''" || '""' or use escape character that is "\"
   http://jennifermadden.com/javascript/escapeCharacter.html

[K4CZP3R]

Adding . before style results in component not rendering and returning the following error: Error: The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.