fix: copy global styles

infodusha · Jul 28, 2024 · baf3d25 · baf3d25
1 parent 0b7ee2d
commit baf3d25
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 9 deletions.
diff --git a/example/index.html b/example/index.html
@@ -3,6 +3,8 @@
 	<head>
 		<meta charset="UTF-8" />
 		<title>define-html</title>
+		<link rel="stylesheet" href="style.css" type="text/css" />
+
 		<link
 			rel="preload"
 			href="components/app-root.html"
@@ -21,11 +23,5 @@
 	</head>
 	<body>
 		<app-root></app-root>
-
-		<style>
-			body {
-				margin: 4%;
-			}
-		</style>
 	</body>
 </html>
diff --git a/example/style.css b/example/style.css
@@ -1,3 +1,3 @@
 body {
-	margin: auto;
+	margin: 4%;
 }
diff --git a/src/css-helpers.ts b/src/css-helpers.ts
@@ -1,3 +1,5 @@
+import { cloneNode } from "./helpers.js";
+
 const hostRe = /:host(\((.+)\))?/g;
 
 export function getEncapsulatedCss(
@@ -38,5 +40,7 @@ export function appendCssLink(cssText: string): void {
 export type GlobalStyle = HTMLStyleElement | HTMLLinkElement;
 
 export function getGlobalStyles(): GlobalStyle[] {
-	return Array.from(document.querySelectorAll("style, link[rel='stylesheet']"));
+	return Array.from(
+		document.querySelectorAll<GlobalStyle>("style, link[rel='stylesheet']")
+	).map((el) => cloneNode(el));
 }
diff --git a/src/execute-script.ts b/src/execute-script.ts
@@ -4,7 +4,7 @@ import { returnIfDefined } from "./helpers.js";
 const importRe =
 	/(?<=(?:[\s\n;])|^)(?:import[\s\n]*((?:(?<=[\s\n])type)?)(?=[\n\s\*\{])[\s\n]*)((?:(?:[_\$\w][_\$\w0-9]*)(?:[\s\n]+(?:as[\s\n]+(?:[_\$\w][_\$\w0-9]*)))?(?=(?:[\n\s]*,[\n\s]*[\{\*])|(?:[\n\s]+from)))?)[\s\n,]*((?:\*[\n\s]*(?:as[\s\n]+(?:[_\$\w][_\$\w0-9]*))(?=[\n\s]+from))?)[\s\n,]*((?:\{[n\s]*(?:(?:[_\$\w][_\$\w0-9]*)(?:[\s\n]+(?:as[\s\n]+(?:[_\$\w][_\$\w0-9]*)))?[\s\n]*,?[\s\n]*)*\}(?=[\n\s]*from))?)(?:[\s\n]*((?:from)?))[\s\n]*(?:["']([^"']*)(["']))[\s\n]*?;?/gm;
 
-const scriptContextSymbolKey = "scriptContextSymbol";
+const scriptContextSymbolKey = "define-html-script-context";
 const scriptContextSymbol: unique symbol = Symbol.for(scriptContextSymbolKey);
 
 declare global {