You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+46Lines changed: 46 additions & 0 deletions
Original file line number
Diff line number
Diff line change
@@ -323,6 +323,52 @@ npm run start:debugServer
323
323
324
324
See the [VSCode Server](https://github.com/CodinGame/monaco-vscode-api/wiki/How-to-install-and-use-VSCode-server-with-monaco‐vscode‐api) wiki page.
325
325
326
+
## Shadow dom (⚠️ beta ⚠️)
327
+
328
+
The library supports shadow-dom.
329
+
330
+
⚠️ VSCode itself does support shadow dom, and there are multiple parts that needed to be patched in order for it to work.
331
+
332
+
There are multiple benefits of using it:
333
+
- Your custom global style won't impact the VSCode workbench style (for instance if you did override the default [box-sizing](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing))
334
+
- The VSCode styles won't impact other parts of your app
335
+
- You page head won't be polluted with dozen of css files from VSCode
336
+
337
+
### How to use it
338
+
339
+
If the provided container element is a child of a shadow dom element, the styles will be injected in both the main page and the shadow root. That's it.
340
+
341
+
### Prerequisites
342
+
343
+
In order to be able to load the static css files in the shadow dom as well. Your bundler configuration needs to be adapted so that importing css files doesn't load their content in the page head, but instead just returns the file content as default. It can be achieved with most bundlers with some configurations.
If something doesn't work, make sure to check out the [Troubleshooting](https://github.com/CodinGame/monaco-vscode-api/wiki/Troubleshooting) wiki page.
0 commit comments