Merge pull request #3595 from microsoft/hediet/blonde-puma

Fixes #3588

website/src/website/data/playground-samples/creating-the-editor/web-component/sample.html

@@ -0,0 +1,8 @@
+<template id="editor-template">
+	<div
+		id="container"
+		style="overflow: hidden; width: 100%; height: 100%; position: absolute"
+	></div>
+</template>
+
+<code-view-monaco></code-view-monaco>

website/src/website/data/playground-samples/creating-the-editor/web-component/sample.js

@@ -0,0 +1,33 @@
+customElements.define(
+	"code-view-monaco",
+	class CodeViewMonaco extends HTMLElement {
+		_monacoEditor;
+		/** @type HTMLElement */
+		_editor;
+
+		constructor() {
+			super();
+
+			const shadowRoot = this.attachShadow({ mode: "open" });
+
+			// Copy over editor styles
+			const style = document.querySelector(
+				"link[rel='stylesheet'][data-name='vs/editor/editor.main']"
+			);
+			shadowRoot.appendChild(style.cloneNode(true));
+
+			const template = /** @type HTMLTemplateElement */ (
+				document.getElementById("editor-template")
+			);
+			shadowRoot.appendChild(template.content.cloneNode(true));
+
+			this._editor = shadowRoot.querySelector("#container");
+			this._monacoEditor = monaco.editor.create(this._editor, {
+				automaticLayout: true,
+				language: "html",
+
+				value: `<div>Hello World</div>`,
+			});
+		}
+	}
+);

website/src/website/data/playground-samples/creating-the-editor/web-component/sample.json

@@ -0,0 +1,4 @@
+{
+	"title": "Web Component",
+	"sortingKey": 10000
+}