Deck.gl: Font Icon (i.e., Webfont) TextLayer Web Component/Shadow DOM?

[jfuehner]

Related to question# 4073

@Pessimistress so I tried both the hack and the FontFace recommendations. These both work in simple scenarios.

However, I have an app where I am loading the deck canvas as a web component which gets rendered to the browser inside a shadow-dom. For some reason, neither the hack nor the FontFace solutions work in this situation. Its as if the canvas context is not picking up the custom font with it being inside the shadow-dom...

I can see the font loaded and when I do the _hack_ solution inside the same web component where the deck canvas is located I can see the icons being displayed inside the div. However, nothing is rendered to deck canvas. I'm working with deck v8.0.6.

Any thoughts? Would there perhaps be another way to pass the font to the canvas context?

[Pessimistress]

Can you post a code snippet that reproduces this issue?

[jfuehner]

@Pessimistress

Turns out its not an issue with the web component/shadow-dom but an issue with the escaped unicode string passed down from our back-end services. I created this Codepen that replicates the issue...

Essentially, the characterSet and text property come down from the server with with their strings double-backslashed since they were escaped on the server side.

This in turn gives me warnings. It appears deck is seeing the individual characters of the string as opposed to the entire string due to the double-backslash...

When I remove the double-backslash and replace with a single-backslash all works as expected. Thoughts?

[Pessimistress]

This is expected. Your application is responsible of parsing the data that your backend generates into the right format.