html - 如何将自定义 css 应用于元素内的阴影 DOM？

Question

我用 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 应用于 ion-buttons 和 p 标签。但不能将 CSS 应用于 item-native 和 item-native 内部的 item-inner。

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

Answer 1

这就是 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。

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