带有纸张输入的 Polymer 1.x 插入图像

Question

这是我的情况 - 每当出现纸张输入错误时，我都想显示带有错误信息的图像。所以我想生成看起来像这样的代码

<paper-input-error ng-if="isError">{{errorMessage}}
    <iron-icon icon="icons:warning"</iron-icon>
</paper-input-error>

我正在尝试使用 ::after 标记使用 css 添加代码

<style>
   paper-input-error::before{
     content:'<iron-icon icon="icons:warning"</iron-icon>';   
   }
<style>

但这不起作用。最好的方法是什么？

Answer 1

// import paper-input-error
<dom-module id="element-name">

      <template>
        <style>
          /* CSS rules for your element */
        </style>

        <!-- local DOM for your element -->

        <paper-input-error ng-if="isError">{{errorMessage}}
           <iron-icon icon="icons:warning"</iron-icon>
        </paper-input-error>
      </template>

      <script>
        // element registration
        Polymer({
          is: "my-input-error",

          // add properties and methods on the element's prototype

          properties: {
            // declare properties for the element's public API
            isError: {
              type: Boolean,
              value: false
            },
            errorMessage: {
              type: String,
              value: 'Error!'
            }
          }
        });
      </script>

    </dom-module>