Lit-element: [Firefox] Attributes are reassigned if used in styles

Created on 22 May 2018  路  9Comments  路  Source: Polymer/lit-element

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.

firefox_bug

picture jofan

Most helpful comment

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

picture valdrinkoshi on 24 May 2018
👍2

All 9 comments

I see the same bug on Chrome 63 on windows

blikblum picture blikblum on 22 May 2018

Hi,
this look more a lit-html issue but i'm not sure you can use expression inside