Polymer 2中Paper-Input前缀不显示问题求助

Hey there! Let's get that +54 country code prefix showing up in your paper-input component. I see a couple of tweaks we can make to fix this—here are two reliable solutions:

1. Use the paper-input's Native prefix Attribute (Recommended) #

The paper-input component has a built-in prefix property made exactly for this use case, which is way simpler and less error-prone than adding a custom slot element. Give this a try:

<paper-input 
  value="{{cellno}}" 
  style="color:white;" 
  label="Ingrese su número de celular" 
  auto-validate 
  pattern="(?:11|[2368]\d)(?:(?=\d{0,2}15)\d{2})??\d{8}$" 
  error-message="Ingrese un número de celular válido" 
  invalid={{invalidCellno}}
  prefix="+54"
  prefix-style="color:white;"
></paper-input>

What this does: #

• The prefix attribute directly injects your country code into the input's dedicated prefix area
• prefix-style lets you style the prefix text independently (we're keeping it white to match your existing setup)
• This avoids any slot compatibility issues since it uses the component's native functionality

2. Fix the Slot-Based Approach (If You Prefer This Method) #

If you want to stick with using a slot, the issue might be that your <div> isn't being properly recognized or lacks necessary layout styles. Try switching to a <span> (better for inline text elements) and adding a few style adjustments:

<paper-input 
  value="{{cellno}}" 
  style="color:white;" 
  label="Ingrese su número de celular" 
  auto-validate 
  pattern="(?:11|[2368]\d)(?:(?=\d{0,2}15)\d{2})??\d{8}$" 
  error-message="Ingrese un número de celular válido" 
  invalid={{invalidCellno}}
>
  <span slot="prefix" style="color:white; display: inline-block; margin-right: 8px;">+54</span>
</paper-input>

Key fixes here: #

• Swapped <div> for <span> to maintain inline flow with the input text
• Added display: inline-block to ensure the prefix stays within the input's bounds
• Added margin-right to create clean spacing between the prefix and the user's input

Either of these solutions should get your +54 prefix showing up correctly. The native prefix attribute is my top pick since it's purpose-built for this scenario!

内容的提问来源于stack exchange，提问作者Ignacio Nacho Parravicini