如何在Polymer框架的必填字段中添加星号(*)符号

paper-input组件默认不会自动为带required属性的字段渲染必填星号，可根据项目场景选择以下实现方式：

• 方案1：直接修改label文本（快速实现）
  最简便的方式就是直接在label属性值末尾拼接星号，不需要额外写样式或逻辑，适合必填字段数量少的场景：

  <paper-input id="firstNameText" required label="First Name *"></paper-input>
  

  缺点是字段多的时候需要逐个修改，后续调整星号样式、显隐规则的维护成本高。

• 方案2：CSS全局统一配置（推荐）
  通过自定义样式统一给所有带required属性的paper-input追加星号，不需要修改每个组件的label属性，适合项目级统一规范：

  注意：paper-input的内部元素在Shadow DOM中，需要通过组件暴露的CSS自定义属性/伪类来修改样式
  如果你使用Polymer 3.x版本，样式写法如下：

  /* 基础版：追加黑色星号 */
  paper-input[required]::part(label)::after {
    content: " *";
  }
  /* 优化版：星号标红突出必填提示 */
  paper-input[required]::part(label)::after {
    content: " *";
    color: #d32f2f;
    font-weight: 500;
  }
  

  如果你使用Polymer 1.x/2.x旧版本，样式调整为：

  paper-input[required] {
    --paper-input-container-label: {
      &::after {
        content: " *";
        color: #d32f2f;
      }
    }
  }
  

  写好之后原有组件代码不需要做任何修改，带required属性的输入框会自动显示星号：

  <paper-input id="firstNameText" required label="First Name"></paper-input>
  

• 方案3：动态绑定label（适合动态表单场景）
  如果表单的必填状态会根据业务逻辑动态变化，可以通过属性绑定的方式动态拼接label文本：

  <paper-input 
    id="firstNameText" 
    required="[[isFirstNameRequired]]" 
    label="[[computeFieldLabel('First Name', isFirstNameRequired)]]">
  </paper-input>
  

  对应的组件方法里实现label拼接逻辑：

  computeFieldLabel(baseLabel, isRequired) {
    return isRequired ? `${baseLabel} *` : baseLabel;
  }
  

内容的提问来源于stack exchange，提问作者Satyam Kumar