我正在将我的应用程序从Ionic V3迁移到V4。几乎完成了，除了...我在样式方面很难。例如，我使用slot
将html迁移到了类似的位置： const char * c[3];
char cs[5];
memcpy(cs, c[0] + 20, 4);
string s (cs,4);
printf(" s= %s\t\n", s.c_str());
printf(" s= %d\t\n", (int)c[0][20]);
升级之前我拥有的CSS：
<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>
因此，当然，有些变化是不费吹灰之力的，例如 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可以通过css4变量转换为background-color: #343B43;。但是有很多事情我找不到容易迁移的方法...而且，我真的很想绕过头痛，并根据Ionic doc中提供的css4变量重新思考css代码的每一行-它是由不同的人写的，这将花费我太多时间。
对于前面的示例，这是阴影dom的外观：
--background由于<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依次出现-这当然不是我们想要的...
那么，我有一个简单的解决方案将我的样式应用于离子组件的阴影dom内的开槽元素吗？
答案 0 :(得分：1)
如果ionic正确遵循规范，则深层选择器已被弃用，并且如果不使用css4变量，仍然无法将css应用于来自父组件的阴影dom。有一个W3C draft to implement Shadow Parts，但它是still in development。