Search code examples
stylesmustachepolymer

Mustache expressions not working anymore in polymer styling?

Is it just me or did the last release of polymer trim the mustache ? I'd swear this code snippet (http://jsbin.com/eRimiJo/10/edit) worked perfectly last week, and now it's useless as the mustache magic seems to be non functional any more :

<script src="http://www.polymer-project.org/polymer.min.js"></script>

<polymer-element name="test-attr" attributes="width" noscript>
<template>
    <style>
        @host {
            :scope {
              display: block;
              width: {{width}}px;
              height: 100px;
              background-color: black;
              }
            }
        </style>
    <content></content>
    </template>
</polymer-element>

<test-attr width="100">Hello</test-attr>

EDIT : edited to remove obvious typos

Solution

  • There are a couple of things that need changing in your example:

    • <content> needs to be within the outer </template>
    • You're binding 100px as the width attribute value. Drop the "px", otherwise the binding output becomes width: 100pxpx; within the <style>.

    With the changes: http://jsbin.com/ODEGika/3/edit

    That said, this is only working for me in Chrome Canary. It looks like a regression with the polyfills. Filed here: https://github.com/Polymer/polymer/issues/270