3

如果我尝试将数据绑定到<style>标签内 Web 组件的 CSS 样式表，则绑定不起作用。（该块中的所有静态 CSS 都有效）

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

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

<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 属性使用数据绑定？

4

1 回答 1

1

我建议以稍微不同的方式考虑这个问题：尝试使用 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>
于 2013-07-04T16:04:41.367 回答