Skip to content

Commit c9b3e6b

Browse files
author
Loïc Mangeonjean
committed
doc: mention shadow dom in documentation
1 parent 703057e commit c9b3e6b

File tree

1 file changed

+46
-0
lines changed

1 file changed

+46
-0
lines changed

README.md

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -323,6 +323,52 @@ npm run start:debugServer
323323

324324
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.
325325

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.
344+
345+
#### Webpack
346+
Add this rule in your configuration:
347+
```typescript
348+
{
349+
test: /node_modules\/(@codingame\/monaco-vscode|vscode|monaco-editor).*\.css$/,
350+
type: 'asset/source'
351+
}
352+
```
353+
354+
#### Vite
355+
Add this plugin in your configuration:
356+
```typescript
357+
{
358+
name: 'load-vscode-css-as-string',
359+
enforce: 'pre',
360+
resolveId(source, importer) {
361+
const resolved = importer != null ? path.resolve(path.dirname(importer), source) : source
362+
if (
363+
resolved.match(/node_modules\/(@codingame\/monaco-vscode|vscode|monaco-editor).*\.css$/)
364+
) {
365+
return resolved + '?inline'
366+
}
367+
return undefined
368+
}
369+
}
370+
```
371+
326372
## Troubleshooting
327373

328374
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

Comments
 (0)