Hi, I have a
core-style definition that I am including in a custom polymer element. Inside the
core-style definition, I have some CSS that tries to apply based on if an attribute starts with a certain prefix or contains a certain string:
[class^="myprefix-"], [class*=" myprefix-"] {
font-size: 16px;
color: #0071C5;
}
This works perfect in Chrome, but in Firefox the ^ symbol seems to be stripped from the CSS when the core-style is parsed and placed inline in my element's shadow dom. Instead, I see that it translates to the following when I used the "Style Editor" in Firefox to look at the inline CSS. If I manually add the ^ in the Style Editor, the CSS renders as expected in the page.
my-custom-element[class="myprefix-"], my-custom-element [class*=" myprefix-"] {
font-size: 16px; color: rgb(0, 113, 197);
}
Has anyone else seen this type of behavior?
Thanks!