如何将自定义CSS应用于元素内部的影子DOM? [英] How to apply custom css to shadow DOM inside elements?

问题描述

我已经与IONIC 4一起创建了一个新项目.一切正常，并且工作正常.但是，当我尝试将CS​​S应用于#shadow-root 内部的元素时.

I have created a new project with IONIC 4. Everything is fine and working. But when I tried to apply CSS to elements which are present inside #shadow-root.

下面是我的HTML代码

Below is my HTML code

<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.

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应用于这些元素的确切过程.请检查并让我知道解决方法.

I have searched this issue but all said why this is implemented and how important this is. But no one explained the exact process of applying the CSS to these elements. Please check and let me know the solution.

推荐答案

这是shadowDOM的强大之处和痛苦之处.

This is the power and pain of shadowDOM.

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

ShadoDOM was created to allow a sandbox of HTML and CSS.

这意味着，如果要将HTML放置在shadowDOM中，则还需要将CSS放置在相同的shadowDOM中.如果您打算使用多层shadowDOM，则需要在每层中放置所需的CSS.

This means that if you are going to place some HTML in a shadowDOM then you also need to place the CSS in that same shadowDOM. If you plan to have multi-layered shadowDOM then you need to place the required CSS in each layer.

<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内，我们需要将自定义项放置.

In the example above, since shadowDOM is a sandbox, we need to place the customization if <ion-button> inside each shadowRoot/shadowDOM.

最简单的方法是使用 < link> 标签.创建一个仅定义您希望< ion-button> 外观的CSS文件，然后添加< link href ="pathToCss" rel ="stylesheet"> 进入每个ShadowDom.

The easiest way to do this is to use the <link> tag. Create a CSS file that only defines how you want your <ion-button> to look and then add <link href="pathToCss" rel="stylesheet"> into each shadowDom.

虽然我们希望有一种更简单的方法，但是在规范更改之前，这是使内部元素具有正确样式的最简单方法.

While we may wish there were a simpler way, until the spec changes, this is the simplest way to get your inner elements properly styled.

这篇关于如何将自定义CSS应用于元素内部的影子DOM?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！