Добавить процентный текст в статический индикатор выполнения Ionic 4

1110 Я думаю, что то, чего я пытался достичь, невозможно, поскольку это прямое манипулирование теневым домом. Основываясь на этой статье , есть несколько ключевых моментов, касающихся shadow dom:

• Вы не можете стилизовать любые внутренние элементы веб-компонента извне веб-компонента. использование селекторов CSS
• Вы можете стилизовать внутренние элементы веб-компонента, если используются переменные CSS4, так как вы можете изменить значения переменных CSS4.
• Вы можете стилизовать выделенный контент внутри веб-компонента (т. Е. Контент, который вы предоставили веб-компоненту) снаружи веб-компонента
• Вы можете стилизовать хост-элемент веб-компонента (т. Е. Элемент вы используете для добавления веб-компонента на страницу) извне веб-компонента

Поскольку отсутствует переменная или свойство css4, которое позволяет нам добавлять текстовое значение к элементу progress- бар, у меня не было выбора, кроме как использовать пользовательский индикатор хода выполнения HTML :

.progress-outer {
        width: 96%;
        margin: 10px 2%;
        padding: 3px;
        text-align: center;
        background-color: #f4f4f4;
        border: 1px solid #dcdcdc;
        color: #fff;
        border-radius: 20px;
}

.progress-inner {
        min-width: 15%;
        width: 90%;
        white-space: nowrap;
        overflow: hidden;
        padding: 5px;
        border-radius: 20px;
        background-color: var(--ion-color-primary);
}

<div class="progress-outer">
    <div class="progress-inner">90%</div>
</div>

[1113 ] Внешний вид индикатора выполнения можно затем настроить, изменив свойства CSS