Galactic design and unadulterated HTML

Question

I incorporate 2 nebulous motifs: one light and one dark. A component that binds the HTML output from a library to the innerHtml looks like this:

<div [innerHtml]="songHtml"></div>

To style this content with custom CSS, I added the following:

@Component({
    [...]
    encapsulation: ViewEncapsulation.ShadowDom,
})

Now, I am trying to apply theme colors like this:

@include nb-install-component() {
    .chords-color-red {
        color: nb-theme(text-color-red)
    }
}

Unfortunately, this method is not effective... I have learned that it does not work with ViewEncapsulation.

Here are some unsuccessful attempts I made:

Is there a way to make this work? Thank you!

Answer 1

Answer №1

After much searching, I managed to find a solution, although it's not the most elegant.

I made the decision to remove the ViewEncapsulation
To style the innerHTML elements as desired, I utilized ::ng-deep { }
Unfortunately, point 2) was ineffective with nb-install-component, so I had to move every nb-theme declaration outside of ::ng-deep { } and add ::ng-deep in front of each css group

It should be noted that ng-deep is deprecated, but I had no other choice to achieve the desired result.

Answer 2

After much searching, I managed to find a solution, although it's not the most elegant.

I made the decision to remove the ViewEncapsulation
To style the innerHTML elements as desired, I utilized ::ng-deep { }
Unfortunately, point 2) was ineffective with nb-install-component, so I had to move every nb-theme declaration outside of ::ng-deep { } and add ::ng-deep in front of each css group

It should be noted that ng-deep is deprecated, but I had no other choice to achieve the desired result.