navikt · KenAJoh · Oct 18, 2022 · Oct 18, 2022 · Oct 18, 2022 · andnorda
diff --git a/examples/shadow-dom/index.html b/examples/shadow-dom/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>shadow-dom example</title>
+  </head>
+  <body>
+    <custom-component></custom-component>
+    <script type="module" src="/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/shadow-dom/main.tsx b/examples/shadow-dom/main.tsx
@@ -0,0 +1,19 @@
+import ReactDOM from "react-dom/client";
+import { Button } from "@navikt/ds-react";
+import styles from "@navikt/ds-css/dist/index.css?inline";
+
+class CustomComponent extends HTMLElement {
+  connectedCallback() {
+    const mountPoint = document.createElement("span");
+    this.attachShadow({ mode: "closed" }).appendChild(mountPoint);
+
+    ReactDOM.createRoot(mountPoint).render(
+      <>
+        <style>{styles}</style>
+        <Button>Click me!</Button>
+      </>
+    );
+  }
+}
+
+window.customElements.define("custom-component", CustomComponent);
diff --git a/examples/shadow-dom/package.json b/examples/shadow-dom/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "shadow-dom",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@navikt/ds-css": "*",
+    "@navikt/ds-react": "*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6",
+    "@vitejs/plugin-react": "^2.1.0",
+    "typescript": "^4.6.4",
+    "vite": "^3.1.0"
+  }
+}
diff --git a/examples/shadow-dom/public/vite.svg b/examples/shadow-dom/public/vite.svg
diff --git a/examples/shadow-dom/tsconfig.json b/examples/shadow-dom/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/examples/shadow-dom/tsconfig.node.json b/examples/shadow-dom/tsconfig.node.json
@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/examples/shadow-dom/vite.config.ts b/examples/shadow-dom/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+});