Question

我知道您可以使用以下语法将元素的属性绑定到类属性，以用于自定义元素中的元素，

<div id="arrow" class$="{{propertyName}}"></div>

但是可以将绑定应用于宿主元素本身吗？我已经尝试了下面显示的内容，以及其他各种尝试，但都失败了！

<link rel="import" href="../bower_components/polymer/polymer.html">

<dom-module id="my-element" class$="{{propertyName}}">
    <template>
        <style>
        </style>
    </template>
    <script>
        Polymer({
            is:'my-element'
        });
    </script>
</dom-module>

Answer 1

您可以通过reflecting property value to attribute完成您想要做的事。

Polymer({
  properties: {
    someProp: {
      reflectToAttribute: true
    }
  }
});

请参阅下文，如何在主机节点上设置class和other属性'。

我不确定重新定义像class这样的内置属性是明智的。如果您想使用反射属性进行样式设置，最好选择属性选择器，就像我使用me-elem[other]一样。

Polymer({
  is: 'my-elem',
  properties: {
    class: {
      reflectToAttribute: true,
      value: 'red'
    },
    other: {
      type: Boolean,
      reflectToAttribute: true,
      value: true
    }
  }
});

<!DOCTYPE html>
<html>
<head>
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import"/>
</head>

<body>
  <style>
    .red {
      color: red;
    }
    
    my-elem[other] {
      border: solid 1px black;
    }
  </style>
  
  <my-elem></my-elem>
  
  <dom-module id="my-elem">
    <template>
      Some text   
    </template>
  </dom-module>
</body>
</html>

最后，请注意reflectToAttribute，因为在DOM中序列化了大值，您可以看到性能下降。

使用Polymer，如何将类绑定到host元素

1 个答案: