Render markdown preview cells inside a shadow dom (#120137)

* Render markdown preview cells inside a shadow dom

Fixes #119971

This moves all markdown previews into shadow doms. This lets us prevent styles from outside the preview leak into the preview, and also prevents styles from the preview leak out into the rest of the notebook

* Use composedPath for handling events in webviews

This lets us handle clicks triggered inside of a shadow dom

extensions/markdown-language-features/notebook/index.ts

@@ -24,5 +24,10 @@ type extendMarkdownItFnType = (
 	notebook.onDidCreateMarkdown(({ element, content }: any) => {
 		const rendered = markdownIt.render(content);
 		element.innerHTML = rendered;
+
+		// Insert styles into markdown preview shadow dom so that they are applied
+		for (const markdownStyleNode of document.getElementsByClassName('markdown-style')) {
+			element.appendChild(markdownStyleNode.cloneNode(true));
+		}
 	});
 }());

extensions/markdown-language-features/notebook/tsconfig.json

@@ -0,0 +1,12 @@
+{
+	"extends": "../../shared.tsconfig.json",
+	"compilerOptions": {
+		"outDir": "./dist/",
+		"jsx": "react",
+		"lib": [
+			"es2018",
+			"DOM",
+			"DOM.Iterable"
+		]
+	}
+}