In a previous attempt, we were distributing the monaco CSS file as an asset but in DNN context we had no great way to know in which path those files would actually live as we are producing components and not a website. So I reverted to using an scss import as that part was working right, it's only the font that was not working

In order to fix the font I discovered that chrome has a bug with fonts defined inside shadow-root and the workaround is to use scripts to import the font on the document head. I learned that one can use import.meta.url in the context of es-modules to get the URL to the module and not the page or otherwise.

For assets paths, since we have no clue where the path would be for a consumer, I learned that one can use import.meta.url inside an es-module to get the actual path where the module loaded from. We can now use this to reference the assets path correctly no matter where they get distributed by consumers.

I also learned that since Stencil supports workers out of the box, it is better to use getWorker rather than getWorkerUrl for performance and maybe we also avoid some path issues this way as Stencil will know what to bundle how.

I changed some monaco default options that I did not know existed. The most notable one being ariaContainerElement, unless this is set, the default is to inject the aria-text directly at the document end. I am now setting it to a local hidden div for screen-readers only and it no longer shows under the editor.