Как применить пользовательские CSS к теневым DOM внутри элементов? - PullRequest
Новая
       32

Как применить пользовательские CSS к теневым DOM внутри элементов?

0 голосов
/ 27 февраля 2019

Я создал новый проект с IONIC 4. Все хорошо и работает.Но когда я попытался применить CSS к элементам, которые присутствуют внутри # shadow-root .

Ниже приведен мой HTML-код 

<ion-item class="itm-pad" no-padding>
<p>Rajkumar</p>
<ion-buttons slot="start">
  <ion-button>
    <ion-icon slot="icon-only" name="funnel"></ion-icon>
  </ion-button>
</ion-buttons>
<ion-buttons slot="end">
  <ion-button>
    <ion-icon slot="icon-only" name="search"></ion-icon>
  </ion-button>
</ion-buttons>
</ion-item>

Пожалуйста, см. Скриншот ниже для этогозаявление.Здесь я могу применить CSS к ионным кнопкам и тегу p как обычно.Но не может применить CSS к item-native и item-inner, который находится внутри item-native.enter image description here

Я искал эту проблему, но все сказали, почему это реализовано и насколько это важно.Но никто не объяснил точный процесс применения CSS к этим элементам.Пожалуйста, проверьте и дайте мне знать решение.

1 Ответ

0 голосов
/ 26 марта 2019

Это сила и боль shadowDOM.

ShadoDOM был создан, чтобы разрешить изолированную программную среду HTML и CSS.

Это означает, что если вы собираетесь поместить некоторый HTML в shadowDOMтогда вам также нужно разместить CSS в том же shadowDOM.Если вы планируете использовать многослойный shadowDOM, вам нужно разместить необходимый CSS в каждом слое. 

<my-el>
  #shadowRoot
  // Styles must go here
  <inner-el>
    #shadowRoot
    // styles must also go here
    <ion-button>
      <ion-icon slot="icon-only" name="search"></ion-icon>
    </ion-button>
  </inner-el>
  <ion-button>
    <ion-icon slot="icon-only" name="search"></ion-icon>
  </ion-button>
</my-el>

В приведенном выше примере, поскольку shadowDOM - это песочница, нам нужно разместить настройку, если <ion-button> внутри каждого shadowRoot / shadowDOM.

Самый простой способ сделать это - использовать тег <link>.Создайте файл CSS, который определяет только то, как вы хотите, чтобы ваш <ion-button> выглядел, а затем добавьте <link href="pathToCss" rel="stylesheet"> в каждый shadowDom.

Хотя мы можем пожелать, чтобы существовал более простой способ, пока спецификация не изменится, этоСамый простой способ правильно оформить ваши внутренние элементы.

...