Dynamic CSS issue

Question

The below works fine in the LWC playground, but drop it in to the local preview or an org and the css does not behave.

I've discovered that the hover works on a single selector, but with sub selectors it simply doesnt behave correctly.

Here is a playground link (whilst active): https://developer.salesforce.com/docs/component-library/tools/playground/b4msWR4hS/

I've noticed that this works fine on Safari, but not on Chrome. I'm using a Mac with Chrome version Version 80.0.3987.149 (Official Build) (64-bit).

Does anyone have any thoughts on this?

<template>
    <div class="stars" data-stars="1">
      <svg height="25" width="23" class="star" data-rating="1">
        <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78" style="fill-rule:nonzero;"></polygon>
      </svg>
      <svg height="25" width="23" class="star" data-rating="2">
        <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78" style="fill-rule:nonzero;"></polygon>
      </svg>
      <svg height="25" width="23" class="star" data-rating="3">
        <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78" style="fill-rule:nonzero;"></polygon>

      </svg>
      <svg height="25" width="23" class="star" data-rating="4">
        <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78" style="fill-rule:nonzero;"></polygon>
      </svg>
      <svg height="25" width="23" class="star" data-rating="5">
        <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78" style="fill-rule:nonzero;"></polygon>
      </svg>
    </div>
</template>

.stars {
  cursor: pointer;
  display: flex;
}
.stars:hover .star polygon {
  fill: #ffd055 !important;
}
.stars .star polygon {
  fill: #d8d8d8;
}
.stars .star:hover ~ .star polygon {
  fill: #d8d8d8 !important;
}
.stars[data-stars] .star polygon {
  fill: #ffd055;
}
.stars[data-stars="1"] .star:nth-child(1) ~ .star polygon {
  fill: #d8d8d8;
}
.stars[data-stars="2"] .star:nth-child(2) ~ .star polygon {
  fill: #d8d8d8;
}
.stars[data-stars="3"] .star:nth-child(3) ~ .star polygon {
  fill: #d8d8d8;
}
.stars[data-stars="4"] .star:nth-child(4) ~ .star polygon {
  fill: #d8d8d8;
}
.stars[data-stars="5"] .star:nth-child(5) ~ .star polygon {
  fill: #d8d8d8;
}

import { LightningElement } from 'lwc';

export default class RatingTest extends LightningElement {


    renderedCallback() {

            var box = this.template.querySelector('.stars');

            Array.prototype.forEach.call(box.getElementsByTagName('svg'), child => {
                child.addEventListener('click', function(e) {
                    let starEl = e.currentTarget;
                    console.log(starEl.parentNode.dataset.stars + ", " + starEl.dataset.rating);
                    this.clickedRating = starEl.dataset.rating;
                    console.log(this.clickedRating);
                    starEl.parentNode.setAttribute('data-stars', starEl.dataset.rating);
                  }.bind(this));
            });

    }
}

Answer 1

The Problem seems to be in adding onclick on svg during rendered callback instead you can use div above your svg and simly put onlick on it

<template>
        <div class="stars" data-stars="1">
          <div class="stardiv"  onclick={clicked} data-rating="1">
          <svg height="25" width="23" class="star" >
            <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78" style="fill-rule:nonzero;"></polygon>
          </svg>
          </div>
          <div class="stardiv"  onclick={clicked} data-rating="2">
          <svg height="25" width="23" class="star"  >
            <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78" style="fill-rule:nonzero;"></polygon>
          </svg>
          </div>
          <div class="stardiv"  onclick={clicked} data-rating="3" >
          <svg height="25" width="23" class="star" >
            <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78" style="fill-rule:nonzero;"></polygon>

          </svg>
          </div>
          <div class="stardiv"  onclick={clicked} data-rating="4" >
          <svg height="25" width="23" class="star" >
            <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78" style="fill-rule:nonzero;"></polygon>
          </svg>
          </div>
          <div class="stardiv"  onclick={clicked} data-rating="5">
          <svg height="25" width="23" class="star"  >
            <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78" style="fill-rule:nonzero;"></polygon>
          </svg>
          </div>
        </div>
    </template>

and also change css a bit

.stars {
    cursor: pointer;
    display: flex;
  }
  .stars:hover .stardiv .star polygon {
    fill: #ffd055 !important;
  }
  .stars .stardiv .star polygon {
    fill: #d8d8d8;
  }
  .stars .stardiv:hover ~.stardiv .star polygon {
    fill: #d8d8d8 !important;
  }
  .stars[data-stars] .stardiv .star polygon {
    fill: #ffd055;
  }
  .stars[data-stars="1"] .stardiv:nth-child(1)~ .stardiv .star polygon {
    fill: #d8d8d8;
  }
  .stars[data-stars="2"] .stardiv:nth-child(2)~ .stardiv .star polygon {
    fill: #d8d8d8;
  }
  .stars[data-stars="3"] .stardiv:nth-child(3)~ .stardiv .star polygon {
    fill: #d8d8d8;
  }
  .stars[data-stars="4"] .stardiv:nth-child(4)~ .stardiv .star polygon{
    fill: #d8d8d8;
  }
  .stars[data-stars="5"] .stardiv:nth-child(5)~ .stardiv .star polygon {
    fill: #d8d8d8;
  }

JS

import { LightningElement } from 'lwc';

export default class RatingTest extends LightningElement {



    clicked(e){
        let starEl = e.currentTarget;
                    console.log(starEl.parentNode.dataset.stars + ", " + starEl.dataset.rating);
                    this.clickedRating = starEl.dataset.rating;
                    console.log(this.clickedRating);
                    starEl.parentNode.setAttribute('data-stars', starEl.dataset.rating);

    }
}

Answer 2

Fixed!

Salesforce does not assign the shadowselector name consistently in the DOM. It uses the the component name to add an attribute to all elements, but isnt consistent in the capitalisation of these across the elements. It takes the component name and toLowers some parts of the name. Chrome expects a case match to the css selectors for them to activate.

Two components: myRating and rating: same code, just the case different, and the first one doesn't work in Chrome, but the other does.

For others to see, go to the playground above and change app to myApp and then the CSS stops working.

Basically, you need to ensure your component name is all lowercase.