Bindings in <style> no longer work under polyfill

[ebidel]

According to http://stackoverflow.com/questions/18702448/mustache-expressions-not-working-anymore-in-polymer-styling, bindings in <style> no longer work.

Try: http://jsbin.com/ODEGika/3/edit

Canary works correctly for me but Chrome 29 (polyfill) does not.

[sorvell]

I don't expect that this ever worked under the ShadowDOM polyfill. The way
we polyfill styles is incompatible with binding inside a style element.

On Mon, Sep 9, 2013 at 9:54 AM, Eric Bidelman notifications@github.comwrote:

According to
http://stackoverflow.com/questions/18702448/mustache-expressions-not-working-anymore-in-polymer-styling,
bindings in <style> no longer work.

Try: http://jsbin.com/ODEGika/3/edit

Canary works correctly for me but Chrome 29 (polyfill) does not.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/270
.

[rafiduck]

I'm positive it did, I've been struggling to get back what I used to see until last wednesday ...

[frankiefu]

The confusion could be because before Native ShadowDOM was used by default in Chrome but recently we made a change to the way how polymer detects native support (Polymer/platform#34) and so now ShadowDOM polyfill is used by default in Chrome. So I believe it was working on Chrome before because it was using Native ShadowDOM.

[gavindoughtie]

Well, is binding inside a style element something we'll be able to polyfill going forward? Or do we have to bind to the style attribute of the element? (ick)

[gavindoughtie]

Further, it appears that even adding the style attribute directly to the custom element doesn't work, whether or not the values are bound. (i.e., adding style="height:100px; width:50px;" to the element won't resize it correctly, but having those values specified in the template <style> block works correctly (but not with binding)

[ebidel]

Example of that: http://jsbin.com/uniDEj/2/edit

On Wed, Sep 18, 2013 at 8:50 AM, gavindoughtie notifications@github.comwrote:

Further, it appears that even adding the style attribute directly to the
custom element doesn't work, whether or not the values are bound. (i.e.,
adding style="height:100px; width:50px;" to the element won't resize it
correctly, but having those values specified in the template block works
correctly (but not with binding)

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/270#issuecomment-24675581
.

[gavindoughtie]

Your example does not work in Chrome or Canary.

[sorvell]

The jsbin example above currently does not work with the ShadowDOM polyfill because bindings in style elements are not supported there. When that binding is removed, the styling works as expected: http://jsbin.com/uniDEj/11/edit.

I recommend avoiding this type of binding unless you can restrict your usage to Canary with experimental web platform features on.

The example works in Canary when the experimental web platform features flag is enabled.

It's undecided whether or not we will try to add better support for bindings in style elements. Here's some more info about this issue.

First, there is a performance concern with bindings in style elements. When
the binding changes, the entire textContent of the style element is reset
and all the styling is re-applied. For this reason, this type of binding
should generally be avoided.

That said, as mentioned above, these bindings don't function when using the
ShadowDOM polyfill because in that case, polymer's styling shim gathers up
the style rules, alters them, and puts them into the document head.

There's 2 changes that would need to occur to support bindings in style
elements in ShadowDOM polyfill: (1) style elements would need to be
retained (perhaps optionally or if a binding is detected) inside polyfilled
ShadowRoots; (2) the method of altering styles would have to change. It
currently relies on CSSOM and is therefore very unforgiving of invalid
style rules like those containing bindings.

The CSSOM issue is the reason why the fiddle above does not work. If the
binding is placed into its own rule, then, at least, the styling (sans
binding) will be correct (see http://jsbin.com/uniDEj/4/edit).

On Wed, Sep 18, 2013 at 9:47 AM, gavindoughtie notifications@github.comwrote:

Your example does not work in Chrome or Canary.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/270#issuecomment-24680322
.

[sorvell]

Here's an example that shows how <style> elements can host bindings using the ShadowDOM polyfill. I want to re-iterate that we're undecided about providing better support for this, but it is possible.

https://gist.github.com/sorvell/6772909

By default shimmed styles are hoisted to the document. In this example, an element specifically puts a copy of the shimmed styling back into its shadowRoot so bindings can be hosted in it. The @polyfill-rule is used because shimmed styles must otherwise contain valid css, not bindings. The id is used as a way of scoping the styling per instance.

[sorvell]

Update, the no-shim attribute has been added to help address this. It's still a bit cumbersome, but here's an example:

http://jsbin.com/pelon/1/edit

The core-style element does support creating bindings in styles and works with the ShadowDOM polyfill.

[c0b41]

There is a problem that :(

<style no-shim>
      .cover:before {
        background-image:url({{cover}});
      }
      .cover:after {
        background-image:url({{cover}});
      }
    </style>

[caiowilson]

It actually works on Chrome 38.0.2125.104 m when written like this:

http://jsbin.com/munapu/1/edit?html,output

[caiowilson]

Oh and BTW, the "for-now" way, and maybe permanent one is using core-style. It supports bindings fully. Just be aware that the docs are kinda wrong you don't just have to have pure css inside the core-style element you gotta have a "style" with css inside within the "core-style" element

[whaaaley]

@ayhankuru I was having that problem today. The problem is the ()'s are interrupting the {{}}'s.

Here's a workaround without core-style:

Style:

    background-image: {{ src }};

Script:

  publish: {
    src: null,
  },
  ready: function() {
    if( this.src ) {
      this.src = 'url( ' + this.src + ' );';
    }
  }

I like data binding in <style> and I really hope it stays.

[c0b41]

@dustindowell22 I solved this problem a few weeks ago me http://jsbin.com/mutomu/1/edit?html,output 👍

[Nevraeka]

@tjsavage - this one appears working now for me. Can we close this?

Based on @dustindowell22 's jsbin example I created a codepen to test this out.
Codepen example of style binding

[tjsavage]

Thanks! yes we can close this

[Mygod]

Wait what? That example isn't working for me in Firefox 36.0.1...

[Nevraeka]

I didn't add shims for styling because the selectors were the issue. I'll update ASAP

[bigdave]

@tjsavage @Nevraeka The Codepen example above seems to work in Chrome, but not Firefox. Can we reopen this? Or should this be an issue on the webcomponents polyfill?

[caiowilson]

FF is a major pain. That's why i've been away from polymer for a while. I had to make a decision about my project and shift it away (for now) from polymer as the deadline got shorter and it's definitely not ready for production. Chrome is as smooth as butter yet firefox just seems like it's purposely making it harder for the web components trend. Can't know why, maybe it's about focusing on FF OS maybe it's about being a jerk and going against google (mainly chrome).

[dhubler]

I didn't see a lot of FF only issues in 0.5 so it appears mileage may vary.
@caiowilson, feel free to post a list of important FF issues for others can
be aware.

On Mon, Mar 16, 2015 at 11:27 AM caiowilson notifications@github.com
wrote:

FF is a major pain. That's why i've been away from polymer for a while. I
had to make a decision about my project and shift it away (for now) from
polymer as the deadline got shorter and it's definitely not ready for
production. Chrome is as smooth as butter yet firefox just seems like it's
purposely making it harder for the web components trend. Can't know why,
maybe it's about focusing on FF OS maybe it's about being a jerk and going
against google (mainly chrome).

—
Reply to this email directly or view it on GitHub
#270 (comment).

[caiowilson]

I am sorry, right now I don't have the time. But i'll sure do as soon as I can.

[Nevraeka]

im working w/ my codepen now. Just to reiterate so we are on the same page, FF seems good on bindings not in the CSS from what I can see. CSS works other than the obvious binding so this makes me think its either in the binding part of polymer or the shadowCSS in webcomponents.js. Looking into this now

[bigdave]

Verified the same behavior in IE11 as in Firefox: bindings seem to work everywhere except in <style> tags.

[davidmaxwaterman]

We have a css rule :

    [data-role="tree"] {
      transition: background-color {{ANIMATION_LENGTH_SECS / 2}}s ease-in;
      -webkit-transition: background-color {{ANIMATION_LENGTH_SECS / 2}}s ease-in;
    }

and the webkit line is ignored by safari. If I hard-code the binding, then it's fine. I wonder if someone can tell me how I can get it working, if it can.

[caiowilson]

@davidmaxwaterman I've been away from polymer but if you could provide a codepen/jsbin/whatever I'd try to help you. :)

[davidmaxwaterman]

Sorry, it's too big. I think the snippet is pretty clear...the binding doesn't work, so it's as simple as that.

I think the answer is either 'it doesn't work' in a polyfill, and/or I need to do something special about it for polyfill to work as expected. I see some of both of those in the discussion above, but I'm not sure what to try. What are the options?

I'm wondering about no-shim - seems easy to try so I'll give it a shot.

Suggestions welcome (using 0.5.5).

Thanks.

[davidmaxwaterman]

OK, I found out how to make it work. It was more a matter of understanding how the polyfill works, and then applying generic css rules taking those into account. A combination of no-shim and working out where the targets actually were.
One problem was the use of IDs in elements - am I correct in thinking we can't use them if they're not unique in the document, while that is perfectly ok in a shadowDom (of course)?
I ended up putting a class on some elements so that I could target them specifically - similar elements occurred in other places, so I wanted specific style to the instances.
It was complicated further by paper-dialog - it moves everything so it is a child of .
Anyway, while a bit messy now, it works and has made some sense.
Thanks.