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

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; 能够转换为 --background 感谢 css4变量。但是有很多东西我找不到轻松迁移的方法......另外，我真的很想绕过头痛并根据 [= 重新考虑我们 css 代码的每一行32=] Ionic 文档中可用的变量 - 它是由不同的人编写的，这会花费我太多时间。

对于前面的例子，下面是阴影 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 一个接一个地出现 - 这当然不是预期的......

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

Answer 1

如果 ionic 正确遵循规范，深度选择器已被弃用，并且仍然无法在不使用 css4 的情况下从父组件将 css 应用于阴影 dom4变量。有一个W3C draft to implement Shadow Parts but it's still in development.

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

Style custom components and their slotted elements

css

shadow-dom

ionic-framework

ionic4