如何将自定义 CSS 应用到元素内的 Shadow DOM？

我用 IONIC 4 创建了一个新项目。一切都很好并且工作正常。但是当我尝试将 CSS 应用于内部存在的元素时#shadow根.

下面是我的 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>

Please refer below screenshot for this statement. Here I can apply CSS to ion-buttons and p tag as usual. But cannot apply CSS to item-native and item-inner which is inside item-native.

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

这就是 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> https://devdocs.io/html/element/link标签。创建一个 CSS 文件，仅定义您想要的样式<ion-button>查看然后添加<link href="pathToCss" rel="stylesheet">进入每个shadowDom。

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