6adeb770bf
- "examples/embed-demo.html" - "app/src/api/__tests__/engine.test.ts" - "vite.embed.config.ts" - ".gitignore" GSD-Task: S03/T02
80 lines
2.5 KiB
HTML
80 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Kerf Embed Demo — Style Isolation Test</title>
|
|
|
|
<!--
|
|
Host-page styles intentionally use Comic Sans, a bright background,
|
|
and aggressive color overrides. If Shadow DOM isolation works correctly,
|
|
none of these styles should bleed into the <kerf-embed> component.
|
|
-->
|
|
<style>
|
|
* {
|
|
font-family: "Comic Sans MS", "Comic Sans", cursive !important;
|
|
color: #ff00ff !important;
|
|
}
|
|
body {
|
|
background: #fffb00;
|
|
margin: 0;
|
|
padding: 2rem;
|
|
}
|
|
h1, h2, h3, p, span, div, label, button, input, select {
|
|
font-family: "Comic Sans MS", "Comic Sans", cursive !important;
|
|
color: #ff00ff !important;
|
|
border-color: #00ff00 !important;
|
|
}
|
|
a {
|
|
color: #ff0000 !important;
|
|
text-decoration: underline wavy #00ff00 !important;
|
|
}
|
|
button {
|
|
background: #00ff00 !important;
|
|
border: 3px solid #ff0000 !important;
|
|
border-radius: 0 !important;
|
|
padding: 12px 24px !important;
|
|
font-size: 18px !important;
|
|
}
|
|
input, select, textarea {
|
|
background: #ff00ff !important;
|
|
color: #00ff00 !important;
|
|
border: 3px dashed #ff0000 !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<h1>🔧 Kerf Embed Demo</h1>
|
|
<p>
|
|
This page uses <strong>Comic Sans</strong>, a bright yellow background,
|
|
magenta text, and neon green buttons. If you can see the Kerf app below
|
|
with its <em>own</em> styling (not Comic Sans, not magenta), then
|
|
<strong>Shadow DOM style isolation is working correctly</strong>.
|
|
</p>
|
|
|
|
<h2>Host-page controls (should look garish):</h2>
|
|
<button onclick="alert('Host button clicked')">Host Button</button>
|
|
<input type="text" placeholder="Host input field" />
|
|
|
|
<hr style="border: 2px dashed #ff0000; margin: 2rem 0;" />
|
|
|
|
<h2>Embedded Kerf Component:</h2>
|
|
|
|
<!-- The embed component — should render with its own isolated styles -->
|
|
<kerf-embed engine-url="http://localhost:8000/engine"></kerf-embed>
|
|
|
|
<hr style="border: 2px dashed #ff0000; margin: 2rem 0;" />
|
|
|
|
<h2>More host content (should still look garish):</h2>
|
|
<p>
|
|
This paragraph proves that host styles persist after the embed.
|
|
Everything outside <code><kerf-embed></code> should use
|
|
Comic Sans and magenta colors.
|
|
</p>
|
|
|
|
<!-- Load the embed bundle (IIFE for broadest compatibility) -->
|
|
<script src="../dist-embed/kerf-embed.iife.js"></script>
|
|
|
|
</body>
|
|
</html>
|