Stencil: Stencil is not rendering CSS custom properties in style attributes

[dkundel]

Stencil version:

 @stencil/[email protected]

I'm submitting a:

• [x] bug report
• [ ] feature request
• [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com

Current behavior:

If you pass an object of different style properties into the style attribute inside a JSX element, it will drop custom properties starting with --.

Expected behavior:

It should render properties regardless of whether they start with --.

Steps to reproduce:

1. Create a component similar to the one below
2. Consume the component
3. Render the component in the browser and inspect the rendered element. It should have --foo: 30px set along with border: 1px solid #000 and padding: 20px but it dropped that one.

Related code:

import { Component, Element } from '@stencil/core';

@Component({
  tag: 'my-progress-bar',
  styleUrl: 'my-progress-bar.scss'
})
export class MyDemo {

  @Element() el: HTMLElement;

  render() {
    const styles = {
      '--foo': '30px'
    };

    // This would work
    // this.el.style.setProperty('--foo', '30px');

    return <p class="something" style={styles}>Hello</p>
  }
}

Other information:

[jgw96]

Hey, thanks for opening an issue with us! At this time we are not going to support this syntax. CSS variables (also known as custom properties) are not really meant to be used in this way in Stencil. However you can use this.el.style.setProperty('--foo', '30px'); as you mentioned in your example and in fact we encourage the use of the DOM. Thanks for using Stencil!

[lpalbou]

Hey there, I know this ticket is closed but it seems really a big issue that you are not supporting this syntax. Why support it for classes but not for styles ? It seems the whole purpose of those JSX syntax is precisely to avoid those cumbersome back and forth with declaring and accessing the element from longer JS code..

I am generating a number of HTML elements within by web component, where each element has a different background color based on data received. It would make a lot of sense to be able to write that when iterating over a list of items:

let styles = { 'background': this.itemColor(item) }

return <td
    class="cell--item"
    style={styles}
    onClick={this.itemClick.bind(this, subject, group)}
    onMouseEnter={this.itemEnter.bind(this, subject, group)}
    onMouseLeave={this.itemLeave.bind(this, subject, group)}
    title={title}>
</td>

Thanks @jgw96