如何将自定义css应用于DOM内部元素？

Question

我用IONIC 4创建了一个新项目。一切都很好，工作正常。但是当我尝试将CS​​S应用于＃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应用于ion-buttons和p tag。但是不能将CSS应用于item-native中的item-native和item-inner。

我已经搜索了这个问题，但是所有人都说这是为什么实施这个问题以及这有多重要但没有人解释将CSS应用于这些元素的确切过程。请检查并告诉我解决方案。

Answer 1

这就是shadowDOM的力量和痛苦。

创建ShadoDOM是为了允许HTML和CSS的沙箱。

这意味着如果您要在shadowDOM中放置一些HTML，那么您还需要将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中。

虽然我们可能希望有一种更简单的方法，但在规范发生变化之前，这是让内部元素正确设置样式的最简单方法。