43 lines
926 B
HTML
43 lines
926 B
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<script type="module">
|
|
class MonacoEditorElement extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
this.style = 'display: block;';
|
|
const shadow = this.attachShadow({ mode: 'open' });
|
|
const iframe = document.createElement('iframe');
|
|
iframe.src = new URL('iframe.html?editor=src', import.meta.url).href;
|
|
iframe.style = `width: 100%; height: 100%;`;
|
|
shadow.appendChild(iframe);
|
|
}
|
|
}
|
|
|
|
customElements.define('monaco-editor', MonacoEditorElement);
|
|
</script>
|
|
<style>
|
|
section {
|
|
margin: 80px;
|
|
}
|
|
|
|
iframe,
|
|
monaco-editor {
|
|
width: 640px;
|
|
height: 400px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<section>
|
|
<h1>Monaco in a shadowRoot + iframe context</h1>
|
|
<monaco-editor></monaco-editor>
|
|
</section>
|
|
<hr>
|
|
<section>
|
|
<h1>Monaco in an iframe context</h1>
|
|
<iframe src="iframe.html?editor=src"></iframe>
|
|
</section>
|
|
</body>
|
|
</html>
|