[Firefox] Attributes are reassigned if used in styles

If using the attribute values in the style tag, the values of attributes are reassigned between each other. I created a simple demo: Stackblitz Demo

In the demo the relevant code looks like:

_render({top, left, animal, whales}) {
    return html`
      <style>
        :host {
          display: block;
          position:absolute;
          top: ${top}px;
          left: ${left}px;
        }
      </style>
      <h4>Type: ${animal}</h4>
      <div>Whales: ${'🐳'.repeat(whales)}</div>
      <p>Top: ${top}, Left: ${left}</p>
      <slot></slot>
    `;
  }

In Chrome it works but in Firefox animal and top, and whales and left will have changed values with each other. Removing top and left from style declaration makes the issue go away.

[valdrinkoshi]

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 https://github.com/Polymer/lit-element/issues/74#issuecomment-391368188

[eskan]

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');