[Firefox] Attributes are reassigned if used in styles about lit-element HOT 9 CLOSED

Hi,
this look more a lit-html issue but i'm not sure you can use expression inside <style>, template are a dom hack to substitute values in places.
To achieve this you need to use inline style

style$=${`top: ${top}; left: ${left};`}

you can also use css custom properties

:host {
          display: block;
          position:absolute;
          --my-top: 100px;
          --my-left: 300px;
          top: var(--my-top);
          left: var(--my-left);
        }

and
this.style.setProperty('--my-top','400px');

from lit-element.

Modifying the content of a stylesheet is bad practice, because that invalidates all the styles of that stylesheet, potentially causing unnecessary layout/paint. The most efficient way would be to use css custom properties as suggested in #74 (comment)

from lit-element.

I see the same bug on Chrome 63 on windows

from lit-element.

Thanks @eskan, I did use inline styles to work around this but I think this limitation should be documented as the big selling point is that it's just string literals and therefor something like this would be expected to work, in my opinion.

from lit-element.

@jofan here isn't only string literal it's lit-html which use string literal to build template result with "parts" and this is dom relative.
@justinfagnani may you confirm that lit-html can't be use inside <style> ?

from lit-element.

Support for style is advertised as one of the lit-html features: https://github.com/polymer/lit-html#css-compatible-syntax

from lit-element.

@blikblum i understand this as "lit html syntax is compatible with css syntax" so you can write style inside template string. (vs include expression in CSS style)

from lit-element.

Using expressions inside of the <style> element is not supported in browsers where shadycss is required. The shim takes <style> element and put it in the head of the document (it adds also scope to template element and CSS selectors). It has to be done before render method is called, so your values are placed in incorrect place.

from lit-element.

@smalluban Thanks for that explanation. Then it's promising for the future when the shim is no longer necessary.

from lit-element.