Regarding limitations of expressions in styles about hybrids HOT 2 CLOSED

Thanks for the discussion. I was sure there were things I had not considered and expected as much.

from hybrids.

Styling limitations exist because of older browser support. It is not a library limitation. You can use expressions in <style> element if you target modern browsers. However, then you should use <style> element in your template rather than passing a string value to .style() helper. Why?

Again, because of polyfills, .style() helper changes the signature of the template (under the hood ShadyCSS creates style element and put it into the head of the document with a special prefix, which is added to all elements of the template. I didn't check, but your example might break with more changes). It means that a template with a different style, like in your example (when changing isRed value) creates a new, unique template ID. When engine takes new template ID, it wipes out "old" template and replaces it with the new one.

Even though your example works, it brings a big performance cost. When you change isRed value, your <h1> element will be replaced with new <h1> element.

For CSS in JS like approach, I recommend using inline styles, which are supported by the template engine:

const App = {
  isRed: true,
  render: ({ isRed }) => html`
    <h1 style={{ color: isRed ? "red" : "blue" }}>Hello World</h1>
  `,
};

You can also create "helper" method, for creating your styles:

const fontSize = {
  normal: "1rem",
};

const style = isRed => ({
  fontSize: fontSize.normal,
  color: isRed ? "red" : "blue",
});

const App = {
  isRed: true,
  render: ({ isRed }) => html`
    <h1 style={style(isRed)}>Hello World</h1>
  `,
};

Although, creating dynamic styles at scale might have some performance impact. Creating a static style, and then using classes or other selectors for switching styles will always be faster.

from hybrids.