样式化自定义组件及其开槽元素

Question

我正在将我的应用从 Ionic V3 迁移到 V4。几乎完成了，除了...我在造型上遇到了困难。例如，我使用插槽将我的 html 迁移到这样的东西：

  <ion-list>
    <ion-item class="list-item" *ngFor="let a of v">
      <ion-avatar slot="start">
        <img class="mainImg" [src]="a.image ? a.image : globals.userImage">
        <img class="candle" [src]="'assets/imgs/home/candle.png'">
      </ion-avatar>
      <h3 class="item-title">{{a.first_name}} {{a.last_name}}</h3>
      <p class="item-description">
        In X days
        <span>
          {{a.day}} {{a.monthName}}
        </span>
      </p>
      <div class="badgeHolder" (click)="gotoSpecialPage()"><ion-badge slot="end">special page</ion-badge></div>
      <span slot="end" class="iconHolder" (click)="gotoNormalPage()"><ion-icon name="arrow-dropright"></ion-icon></span>
    </ion-item>
  </ion-list>

升级前的 CSS：

  ion-list.list {
    margin-bottom: 0;

    div.list-item.item-block {
      background-color: #343B43;
      margin: 0;
      border-bottom: 1px solid #dedede;
      position: relative;

      ion-avatar {
        position: relative;

        img.mainImg {
          width: 60px;
          height: 60px;
        }

        img.candle {
          position: absolute;
          right: 0;
          bottom: 0;
          width: 20%;
          height: auto;
          border-radius: initial;
        }
      }

      div.item-inner {
        border: 0;
        margin: 0;

        h3 {
          color: white;
          font-weight: 600;
          text-transform: uppercase;
        }

        p.item-description {
          color: white;
          font-size: 13px;

          span {
            font-size: 12px;
            color: #9D9992;
          }
        }

        div.badgeHolder {
          text-align: right;
          margin-right: 28px;

          ion-badge {
            background-color: #907027;
            padding: 7px 10px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 300;
            letter-spacing: 1px;
          }
        }

        span.iconHolder {
          background-color: #2B3036;
          position: absolute;
          right: 0;
          top: 0;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 13px;
          color: #907027;
          font-size: 36px;
        }
      }
    }
  }

因此，当然，有些更改是显而易见的，例如 div.list-item.item-block 简单地变为 ion-item 或 background-color: #343B43; 能够通过 css4 变量转换为 --background。但是有很多事情我找不到轻松迁移的方法......另外，我真的很想绕过头痛，根据 Ionic doc 中可用的 css4 变量重新考虑我们的每一行 css 代码- 它是由不同的人写的，这将花费我太多时间。

对于前面的例子，下面是 shadow dom 的样子：

<div class="item-native">
  <slot name="start"></slot>
  <div class="item-inner">
    <div class="input-wrapper" style="">
      <slot style="">
        <!--h3, p, div are here-->
      </slot>
    </div>
    <slot name="end"></slot>
    <div class="item-inner-highlight"></div>
  </div>
</div>

而且因为item-inner 以水平弯曲显示，我的h3, p, div 一个接一个地出现——这当然不是本意...

那么，我是否有一个简单的解决方案将我的样式应用到离子组件的 shadow dom 内的开槽元素？

Answer 1

如果 ionic 正确地遵循规范，则深度选择器已被弃用，并且仍然无法在不使用 css4 变量的情况下从父组件将 css 应用于 shadow dom。有一个W3C draft to implement Shadow Parts，但它是still in development。