search

fabbricadigitale / paper-chip

A chip web component made with Polymer 2 following Material Design guidelines
http://webcomponents.org/element/fabbricadigitale/paper-chip
MIT License
31 stars 16 forks source link

Overriding max-width on label broken in Firefox #39

Closed mbierlee closed 7 years ago

mbierlee commented 7 years ago

The CSS rule in paper-chip.html on L256 wins the specificity check over external max-width styling in Firefox:

:host(:not([opened])) #label ::slotted([slot="label"]) {
  @apply --paper-font-common-nowrap;
  max-width: 80px;
}

In Chrome it seems to prefer external styling over this internal rule.

Perhaps it's best to assign a CSS variable to this property to let people set their own width requirements or even disable max-width.

leodido commented 7 years ago

Yes, this (probably) happens in every browser without Shadow DOM due how to shimming of ::slotted is done by the WebComponents polyfill.

@alelb is providing a CSS variable to ensure the wanted max-width is always in place.

Thanks a lot for noticing it, keep helping us !