Обновите стили, установленные в Shadow Dom, через CSS

Question

Обновите стили, установленные в Shadow Dom, через CSS

1

Этот вопрос относится к Ionic, но его ответ может применяться в целом к CSS. Я не уверен.

Я использую ionic 4, который создает теневые элементы DOM, которые имеют определенные стили. У меня есть следующее:

<ion-item>
  <ion-label position="floating">Floating Label</ion-label>
  <ion-input></ion-input>
</ion-item>

Я хочу, чтобы текст "Плавающая метка" двигался дальше влево, чем обычно, когда он плавает. Я могу сделать это довольно легко со стилями на самой этикетке.

Тем не менее, теневые DOM-div, созданные под ion-item имеют свои собственные стили, которые включают overflow: hidden. Я не нашел способ обновить эти стили из моей таблицы стилей. Я пробовал использовать /deep/ и различные другие селектора, но они, похоже, не работают, и поддержка для них также кажется удаленной. Я понимаю, что вы можете использовать переменные CSS, но это конкретное overflow свойства не задается переменной. Я также понимаю, что вы можете использовать DOM для вставки стилей в DOM тени, но я хочу избежать этого, так как мне придется делать это где-то в каждом компоненте, а не в том, чтобы делать это один раз в приложении.

Есть ли способ переопределить стили, заданные в теневой DOM, используя CSS, если переменные недоступны?

Explosion Pills 24 окт. 2018, в 22:27

Источник

0

Вы пробовали использовать селектор :host css? Я могу подтвердить, что подходы /deep/ и .cla >>> elem работали до того, как они устарели.
Zze 24 окт. 2018, в 20:21

Теги:

angular

javascript

ionic-framework

css

shadow-dom

1 ответ

Ещё вопросы

Вы пробовали использовать селектор :host css? Я могу подтвердить, что подходы /deep/ и .cla >>> elem работали до того, как они устарели.

Alex Beugnet · Answer 1 · 2018-10-24T19-24-00.000Z

Вы должны попробовать использовать селектор ng-deep, чтобы напрямую манипулировать стилем элементов DOM.

::ng-deep {
 .your-class { // Used to contain your deep change to a localized node
    your style
}

Угловые рекомендации: https://angular.io/guide/component-styles

Из документа, на который вы ссылались « Пронзающий теневой комбинатор не рекомендуется, и поддержка удаляется из основных браузеров и инструментов. Поэтому мы планируем отказаться от поддержки в Angular (для всех 3 из / deep /, >>> и :: ng»). -deep). До тех пор :: ng-deep следует предпочитать для более широкой совместимости с инструментами.
Да, но так было уже более 1 года и до сих пор не обновлено, так что это лучший вариант использования :)