core-style css ^= selector not working in Firefox 33.1

89 views
Skip to first unread message

Average Joe Developer

unread,
Nov 12, 2014, 2:01:05 PM11/12/14
to polym...@googlegroups.com
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! 

Eric Bidelman

unread,
Nov 12, 2014, 6:06:10 PM11/12/14
to Average Joe Developer, Steve Orvell, polymer-dev
+Steve is this a bug in core-style?

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/5030b403-21a2-41a7-b25d-46dde818245b%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

litt.f...@gmail.com

unread,
Dec 13, 2014, 8:08:45 AM12/13/14
to polym...@googlegroups.com, avgjoed...@gmail.com, sor...@google.com
I'm having a similar issue I have this style inside my polymer element (not core-style):

            polyfill-next-selector { content: '> *' }
            ::content > * { margin: 1em 10px; }

That works as expected in Chrome, but not in Firefox 34.0.

Eric Bidelman

unread,
Dec 16, 2014, 3:55:46 PM12/16/14
to litt.f...@gmail.com, polymer-dev, Average Joe Developer, Steve Orvell
Try polyfill-next-selector { content: ':host > *' }

Andre Engelbrecht

unread,
Dec 18, 2014, 8:19:30 AM12/18/14
to Eric Bidelman, polymer-dev, Average Joe Developer, Steve Orvell
Thank you that was indeed the problem. I'll need to remember that :host is required in future :) 
Reply all
Reply to author
Forward
0 new messages