ionic4更改shadow dom css样式

刚升级ionic4,就遇到各种坑,其中一个比较严重的,就是不能像以前一样愉快的更改ionic组件的css了,因为ionic4采用了shadow dom，修改样式需要使用其暴露出来的属性，未暴露的则需要自己通过js获取shadow dom强行修改，因为shadow 和 deep等刺穿shadow dom的方法目前已经废弃。在Google上找了很久，终于找到了一个比较好的能够通过ts处理样式的方法。

git地址

https://github.com/adamlacombe/Shadow-DOM-inject-styles.git

安装方式是通过git直接进行安装

npm install https://github.com/adamlacombe/Shadow-DOM-inject-styles.git --save

比如需要更改tab为如下样式

image.png

在tab.page.ts中,代码如下:

import {Component, ElementRef, OnInit} from '@angular/core';
import {injectStyles} from 'shadow-dom-inject-styles';

@Component({
    selector: 'app-tabs',
    templateUrl: 'tabs.page.html',
    styleUrls: ['tabs.page.scss']
})
export class TabsPage implements OnInit {
    constructor(private el: ElementRef) {
    }

    ngOnInit(): void {
        setTimeout(() => {
            let toolbar = (this.el.nativeElement.querySelector('ion-tabs') as HTMLElement);
            toolbar = toolbar.shadowRoot.querySelector('ion-tabbar');
            // language=CSS
            const styles = `
                .tab-btn:nth-of-type(2) .tab-btn-icon {
                    position:absolute;
                    top: -20px;
                    width: 40px;
                    height: 40px;
                    padding: 10px;
                    border: 1px solid #0076FF;
                    border-radius: 50%;
                    color: white;
                    box-shadow: -2px 2px 6px 0 rgba(0, 118, 255, 0.49);
                    background-color: #0076FF;
                }
                :host{
                    contain: none;
                }
            `;
            injectStyles(toolbar, '.tab-btn', styles);
        }, 50);
    }
}

PS:使用setTimeout是因为发现在直接调用方法时,会获取不到shadow dom 的style标签,所以通过setTimeout来做个延迟。