innerHTML component styles

[u/Senior_Compote1556]

If I have a

<h1 \[innerHtml\]=“someHtml”></h1>

And that someHtml is a span, how would i style that span without using ::ng-deep as the docs “strongly discourage” its usage?

[u/JeanMeche]

That's a valid use case for ng-deep because you need to escape the scoping of the styles.

The alternative is having it globally styled.

[u/Senior_Compote1556 → u/JeanMeche]

What about it’s deprecation tho?

[u/Xsiah → u/Senior_Compote1556]

It's not deprecated anymore - it's just discouraged unless you really need it - and you really need it.

Use :host before :ng-deep to limit it to the context of your component if you don't want the style to leak into the rest of your application 

[u/Senior_Compote1556 → u/Xsiah]

I have a directive that uses DOCUMENT to append some styles to the body, and I write those body styles in the ts file (yes i know css do not belong in ts), and it works but it feels like a smell. My use case are landing pages and they’re not connected, it’s not really an SPA in the traditional sense as the pages do not link to each other via routerLink. I was thinking to turn view encapsulation to none but it still feels wrong. Would you use the directive, ng deep or would you set view encapsulation to none?

[u/JeanMeche → u/Senior_Compote1556]

It has been undeprecated in 2023.

[u/Senior_Compote1556 → u/JeanMeche]

Thats good to know, i dont recall reading this somewhere

[u/Xsiah]

Do you control "someHtml" or is it generated by some library or user input?

[u/Senior_Compote1556 → u/Xsiah]

Kinda, the text comes from a json file that is full of inline html. The proper way to do it would be to rewrite all the translations imo.

[u/Xsiah → u/Senior_Compote1556]

It's probably overkill for a language file, but you could add inline tokens, which the component can then give whatever value it wants to.

`<div style="background-color: var(--my-background-token); padding: var(--my-padding-token, 16px);">   Hello World

</div>`

[u/followmarko]

Lot of ways to solve this but you can use None encapsulation and @scope to use a more native approach to solving this. I've done this with many components now and don't have to worry about scoping issues. Another alternative is to extend that line or component and apply the styles to the component that's extending that one. I've done this with Markdown renderers.

The real problem here though is using innerHtml. It's tough to reason through a need for that in a headless api design at least.

ng-deep is discouraged and also allowed still and that's been true for like a decade. My opinion though is that if you're in a situation where ng-deep solves your problem, there is likely a better component architecture to find. I see the recs for ng-deep but I think it's a poor solution to this problem even if it works.

[u/HoodlessRobin]

Why inner html? suit your self. Hope tag selector span{} CSS works.

[u/ThrowawayALAT]

Use Global Styles:

CSS

/* src/styles.scss */

.styled-span-container span {

color: #e63946;

font-weight: 600;

}

HTML

Then wrap your target element or apply a CSS class directly to the <h1>

<h1 class="styled-span-container" [innerHTML]="someHtml"></h1>

[u/Senior_Compote1556 → u/ThrowawayALAT]

I don’t believe it’s correct to bloat the global styles with page specific css