如何在不使用Dart web ui中元素的style属性的情况下将数据绑定到CSS属性？_Css_Data Binding_Dart_Dart Webui

如何在不使用Dart web ui中元素的style属性的情况下将数据绑定到CSS属性？

css data-binding dart

如何在不使用Dart web ui中元素的style属性的情况下将数据绑定到CSS属性？,css,data-binding,dart,dart-webui,Css,Data Binding,Dart,Dart Webui,如果我试图将数据绑定到标记中的web组件的CSS样式表，绑定将不起作用。（该块中的所有静态CSS都有效） div{ 显示：{{isVisible？'block'：'none'}； } 福巴但是，如果我将样式应用于标记的样式属性，它将按预期工作 <html> <body> <element name='foo' constructor='FooElement' extends='div'> <template>

如果我试图将数据绑定到

标记中的web组件的CSS样式表，绑定将不起作用。（该块中的所有静态CSS都有效）


div{
显示：{{isVisible？'block'：'none'}；
}
福巴

但是，如果我将样式应用于标记的样式属性，它将按预期工作

<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>


福巴

这有明显的缺点

有没有办法在样式表文件或块中的CSS属性上使用数据绑定？

我建议以稍微不同的方式考虑这个问题：尝试使用Dart语法应用CSS类

<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>


div{
显示：块；
}
皮{
显示：无；
}
福巴

谢谢，我不知道为什么我没有看到它。

<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>