search

PolymerElements / paper-input

A Material Design text field
https://www.webcomponents.org/element/PolymerElements/paper-input
130 stars 162 forks source link

Redundant span elements around prefix&suffix causes only issues #635

Closed attilapuskas closed 6 years ago

attilapuskas commented 6 years ago

When the Polymer 1->2 migration has been done, the prefix and suffix slots got wrapper span elements. (here)

This wrapping breaks at least the previously applied fix with --layout-flex-none because it should be used on the wrapper element.

I have seen no benefit in using such span elements around so I would recommend to remove them and adjust the style accordingly, like:

.suffix::slotted(*)
...
<slot class="suffix" name="suffix"></slot>
...
notwaldorf commented 6 years ago

Unfortunately, this is needed because of the shady CSS shim (see the "Note" in the https://www.polymer-project.org/2.0/docs/devguide/style-shadow-dom#style-slotted-content-distributed-children chapter)

attilapuskas commented 6 years ago

I guess you wanted to point on that, right?

Note: To work within the Shady CSS scoping shim limitations, and to ensure consistent cross-browser behavior, add a selector to the left of the ::slotted(.classname) notation (for example, p ::slotted(.classname).

If so then I think the .input-wrapper could be a good candidate for such a selector, couldn't it?

attilapuskas commented 6 years ago

I have just realized that the input-wrapper does not provide the split point which we would need to differentiate between the for example the prefix and suffix but what if we move the class="suffix" from the span element to the slot suffix and then use .suffix::slotted ?