And I’ve just noticed that you were the author of the change, so you must be aware of it ;)
From: Lepinay, Laurent (Financial&Risk) Sent: vendredi 18 septembre 2015 11:28 To: Lepinay, Laurent (Financial&Risk); 'Eric Bidelman'; '[email protected]' Subject: RE: [polymer-dev] custom css property not working Thanks you helped me to find where the issue was. If I use your version of polymer https://polygit.org/polymer/components/polymer/polymer.html things works. But if I use the one from bower "polymer": "Polymer/polymer#1.0.0" It does not. By upgrading to 1.1 it works. Now the funny thing is that I’m sure I got this version by following the getting started instruction on the official web site. And I guess I just got some really bad luck since they changed the version 2 days ago (which probably fixed he issue) (roughly where I started to implement this feature and started battling :p) https://github.com/Polymer/docs/commit/1385ab162b9691976d1705706857db4e1de73ec8 Anyway thanks again Eric. From: Lepinay, Laurent (Financial&Risk) Sent: vendredi 18 septembre 2015 10:42 To: 'Eric Bidelman'; [email protected]<mailto:[email protected]> Subject: RE: [polymer-dev] custom css property not working Hi Eric, I set it as the default here background-color: var(--edit-label-title-color,blue); I also tried to set it up using :root { --edit-label-title-color:blue; } Or :host { --edit-label-title-color:blue; } But this didin’t work neither and I prefer the sortest syntax provided by var(prop,default) From: Eric Bidelman [mailto:[email protected]] Sent: vendredi 18 septembre 2015 10:38 To: Lepinay, Laurent (Financial&Risk); [email protected]<mailto:[email protected]> Subject: Re: [polymer-dev] custom css property not working I don't see where you're defining --edit-label-title-color to be blue. On Fri, Sep 18, 2015 at 10:27 AM <[email protected]<mailto:[email protected]>> wrote: Hi there, I’ve been battling with this for a while now and I can’t figure it out. I’m unable to get even a simple custom css property working using polymer. Here ismy component definition have: <!-- Import Polymer --> <link rel="import" href="bower_components/polymer/polymer.html"> <!-- Define your custom element --> <dom-module id="edit-label"> <template> <style > .someLabel { background-color: var(--edit-label-title-color,blue); } </style> <div hidden$="{{inEditMode}}"> <label class=" someLabel ">{{label}}</label> <span id="editLabel" class="icon-compose"></span> </div> <div hidden$="{{!inEditMode}}"> <input id="labelInput" value="{{label::input}}"></input> <span id="saveLabel" class="edit icon-compose"></span> </div> </template> <script src="bower_components/jquery/dist/jquery.min.js"></script> <script src="bower_components/rxjs/dist/rx.all.js"></script> <script> Polymer({ is:'edit-label', properties: { label:{ type:String, notify:true } }, ready: function() { var $this = this; this.inEditMode = false; Rx.Observable.fromEvent(this.$.editLabel, 'click').subscribe(function (){ $this.inEditMode = true; }); Rx.Observable.fromEvent(this.$.saveLabel, 'click').subscribe(function (){ $this.inEditMode = false; }); }, attached: function() { } }); </script> </dom-module> When I run this in Chrome without setting the property I expect the label to be blue, but instead it keeps it’s default user agent color (black). When I open the chrome dev tool, and I inspect the CSS, I get a warning “Invalid property value”. So something is not happening. Any ideas ? ________________________________ This e-mail is for the sole use of the intended recipient and contains information that may be privileged and/or confidential. If you are not an intended recipient, please notify the sender by return e-mail and delete this e-mail and any attachments. Certain required legal entity disclosures can be accessed on our website.<http://site.thomsonreuters.com/site/disclosures/> Follow Polymer on Google+: plus.google.com/107187849809354688692<http://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 [email protected]<mailto:[email protected]>. To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/F9270B849A6A7C478D3C26FDFA973DE9236AAFBE%40C111SMZLMBX01.ERF.thomson.com<https://groups.google.com/d/msgid/polymer-dev/F9270B849A6A7C478D3C26FDFA973DE9236AAFBE%40C111SMZLMBX01.ERF.thomson.com?utm_medium=email&utm_source=footer>. For more options, visit https://groups.google.com/d/optout. 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 [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/F9270B849A6A7C478D3C26FDFA973DE9236AB002%40C111SMZLMBX01.ERF.thomson.com. For more options, visit https://groups.google.com/d/optout.
