Add a percentage text to a static Ionic 4 progress bar

The actual version of the Ionic progress bar comes without an option to display the percentage text.

I tried to add it manually using the ::after selector but to no avail.

This is my Ionic code:

ion-progress-bar {
  height: 18px;
  border-radius: 20px;
}

<ion-progress-bar color="success" value="0.9"></ion-progress-bar>

While inspecting the element this is what I get in chrome's elements inspector

.progress, .progress-indeterminate {
    background: var(--progress-background);
    z-index: 2;
}

.buffer-circles, .indeterminate-bar-primary, .indeterminate-bar-secondary, .progress, .progress-buffer-bar, .progress-buffer-bar:before, .progress-indeterminate {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    width: 100%;
    height: 100%;
}

<ion-progress-bar _ngcontent-c0="" color="success" value="0.9" ng-reflect-value="0.9" ng-reflect-color="success" role="progressbar" aria-valuenow="0.9" aria-valuemin="0" aria-valuemax="1" class="ion-color ion-color-success progress-bar-determinate hydrated">
  #shadow-root
  <!-- ....... -->
  <div class="progress" style="transform: scaleX(0.9);"></div>
  <div class="progress-buffer-bar" style="transform: scaleX(1);"></div>
</ion-progress-bar>

The only way with which I can add a text from the elements inspector to the progress bar, is to add it inside the div with the progress class:

<div class="progress" style="transform: scaleX(0.9);">90%</div>

But adding this text from my Ionic code isn't possible, so I tried to use the ::after selector but It did not work:

.progress:after{
  content: "90%";
}

I don't need that the text changes dynamically since the progress-bar must display a static value that does not change.

Thanks!

Solution

I think what I was trying to achieve is impossible since it is a direct manipulation of the shadow dom. Based on this article, There are some key points concerning shadow dom:

You cannot style any of the internal elements of a web component from outside of the web component using CSS selectors

You can style the internal elements of a web component if CSS4 variables are being used, as you can change the values of the CSS4 variables.

You can style slotted content inside of a web component (i.e. content you have supplied to the web component) from outside of the web component

You can style the host element of the web component (i.e. the element you use to add the web component to a page) from outside of the web component

Since there is no css4 variable or property that allows us to add a text value to the progress-bar, I had no choice but to use a custom html progress bar:

.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>

The appearance of the progress-bar can be then customized by changing the css properties