如何在元素内部应用自定义CSS到 Shadow DOM 中？

Question

我使用IONIC 4创建了一个新项目，一切都很好，也在正常工作。但是当我试图对出现在#shadow-root内部的元素应用CSS时出现问题。

以下是我的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应用于这些元素。请检查并让我知道解决方案。

- Raj

---

嗨，Raj，你是如何处理它的？我也在做这个。你能给我建议吗？谢谢。 - Dung Phan

我没有找到任何令人满意的解决方案。但是可以有一个，我们可以使用ion-tabs { --color-selected: red; } 我们转向React JS了。如果您找到其他有效的解决方案，请告诉我。 - Raj

我发现 https://ionicframework.com/blog/customize-your-ionic-framework-app-with-css-shadow-parts/ 这篇文章非常有用，你可以看一下。 - greenridinghood

Answer 1

这就是ShadowDOM的强大和痛苦所在。

ShadowDOM的创建旨在允许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>标签。创建一个只定义你想要<ion-button>看起来的CSS文件，然后在每个shadowDom中添加<link href="pathToCss" rel="stylesheet">。

虽然我们可能希望有更简单的方法，但在规范改变之前，这是使你的内部元素正确样式化的最简单方法。

- Intervalia

---

非常感谢您的回复。我会尝试这个方法。 - Raj