How do I bind data to a CSS property without using the style attribute of the element in Dart web-ui?

Question

If I attempt to bind data to a CSS stylesheet for a web component within <style> tags, the binding does not work. (All static CSS within that block works)

<html>
  <body>
    <element name='foo' constructor='FooElement' extends='div'>
      <style>
        div {
          display: {{isVisible ? 'block' : 'none'}};
        }
      </style>

      <template>
        <div>Foobar</div>
      </template>

      <script type="application/dart" src="xfooelement.dart"></script>
    </element>
  </body>
</html>

If, however, I apply the style to the style attribute of a tag, it works as expected.

<html>
  <body>
    <element name='foo' constructor='FooElement' extends='div'>

      <template>
        <div style="display: {{isVisible ? 'block' : 'none'}}">Foobar</div>
      </template>

      <script type="application/dart" src="xfooelement.dart"></script>
    </element>
  </body>
</html>

This has obvious drawbacks.

Is there a way to use data binding on CSS properties in a stylesheet file or block?

score 1 · Accepted Answer · answered Jul 04 '13 at 16:04

I would suggest thinking about this in a slightly different manner: try applying a CSS class using the Dart syntax

<html>
  <body>
    <element name='foo' constructor='FooElement' extends='div'>
      <style>
        div {
          display: block;
        }
        div.hide {
          display: none;
        }
      </style>

      <template>
        <div class="{{isVisible ? '' : 'hide'}}">Foobar</div>
      </template>

      <script type="application/dart" src="xfooelement.dart"></script>
    </element>
  </body>
</html>

Thanks, don't know why I didn't see it. – Poindexter Jul 15 '13 at 14:39 — Poindexter, Jul 15 '13 at 14:39

How do I bind data to a CSS property without using the style attribute of the element in Dart web-ui?

1 Answers1