headings in ion-labels don't inherit overflow and text-overflow

Bug Report

Ionic version:

[x] 4.x

Current behavior:

When nesting a heading (h1, h2, …) inside an ion-label, the overflow: hidden and text-overflow: ellipsis attributes don’t get inherited (anymore?).

Expected behavior:

The headings should inherit the proper overflow attributes.

Steps to reproduce/related code:

https://codepen.io/simonhaenisch/pen/JjPXPEq

<ion-list>
  <ion-item>
    <ion-label>
      <h2>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto laborum, voluptatum corporis reprehenderit ipsa nostrum aperiam optio porro? Ipsa pariatur, earum sapiente nihil sed perspiciatis nostrum voluptas ipsum mollitia repellendus.</h2>
    </ion-label>
  </ion-item>
</ion-list>

Other information:

When setting text-wrap on the ion-label, the nested headings get wrapped as well, but setting text-nowrap still doesn’t apply text-overflow: ellipsis or overflow: hidden to the heading.

Ionic info:

@ionic/core@4.0.0-rc.1

[brandyscarney]

@simonhaenisch I believe it would need to be this instead:

::slotted(*) h1,
::slotted(*) h2,
::slotted(*) h3,
::slotted(*) h4,
::slotted(*) h5,
::slotted(*) h6 {
  text-overflow: inherit;

  overflow: inherit;
}

but yes I would accept this.

Could you add a test in label/test/ called headings that is basically the same as your Codepen including the headings and paragraph? I can review and make changes. Thank you for offering to PR this!!

[simonhaenisch]

@brandyscarney not sure you’ve seen it, I’ve opened a PR for it ☝️