Как добавить border-radius для ion-img в Ionic 4

Question

Мне нужно добавить border-radius к ion-img, но, похоже, shadow DOM не позволит мне изменить.

HTML

<ion-img [src]="img-url" [alt]="alt"></ion-img>

CSS

ion-img  {
    border-radius: 10px !important;
}

Answer 1

Сложно инкапсулировать стиль с помощью Shadow DOM , но есть способы.

В этом случае он работает с атрибутом встроенного стиля?

<ion-img [src]="img-url" [alt]="alt" [style]="border-radius: 10px;"></ion-img>

В противном случае вы можете попробовать добавить тег <style></style> во внутренний HTML-код Shadow DOM с радиусом границы.

Модифицированный пример из прикрепленной ссылки:

const host = document.getElementById('shadow-host');

host.shadowRoot.innerHTML = `
<style>
  img {
    border-radius: 10px;
  }
</style>
`