使用 Polymer 如何将类绑定到宿主元素答案

【问题标题】：With Polymer how can you bind a class to the host element使用 Polymer 如何将类绑定到宿主元素
【发布时间】：2016-09-12 05:56:37
【问题描述】：

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

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

【问题讨论】：

标签： polymer

【解决方案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 中序列化的大值会导致性能下降。

【讨论】：