From 79823deed0c13e70a02bf2e1df1f7857426f8d29 Mon Sep 17 00:00:00 2001
From: Tim Harding <Tim@TimHarding.co>
Date: Wed, 16 Oct 2024 18:44:10 -0700
Subject: [PATCH] Fix shadow root selector

---
 package.json           |  2 +-
 pages/public/style.css |  6 -----
 src/squircle-canvas.js | 52 ++++++++++++++++++++++--------------------
 3 files changed, 28 insertions(+), 32 deletions(-)

diff --git a/package.json b/package.json
index ee32375..9378e0d 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "superellipse-squircle",
   "private": true,
-  "version": "0.1.16",
+  "version": "0.1.17",
   "type": "module",
   "main": "server.js",
   "browser": "client.js",
diff --git a/pages/public/style.css b/pages/public/style.css
index 9daf385..7fb8d44 100644
--- a/pages/public/style.css
+++ b/pages/public/style.css
@@ -357,12 +357,6 @@ main {
   grid-template-areas: "tester";
 }
 
-ce-squircle {
-  display: grid;
-  contain: strict;
-  pointer-events: none;
-}
-
 th-tester {
   grid-area: tester;
   display: grid;
diff --git a/src/squircle-canvas.js b/src/squircle-canvas.js
index f1fa20d..90c2aa5 100644
--- a/src/squircle-canvas.js
+++ b/src/squircle-canvas.js
@@ -1,44 +1,46 @@
 import { paint } from "@/drawing";
 
-const styles = new CSSStyleSheet();
-(() => {
-  styles.replace(`
-:host {
+const stylesString = `
+body {
   display: grid;
-  grid-template-rows: 100%;
-  grid-template-columns: 100%;
+  grid-template-rows: 1fr;
+  grid-template-columns: 1fr;
   grid-template-areas: "fill";
+  padding: 0rem;
+  margin: 0rem;
+  width: 100%;
+  height: 100%;
 }
 
 .canvas {
   grid-area: fill;
+  width: 100%;
+  height: 100%;
   contain: strict;
-  z-index: -1000;
 }
 
 .content {
   grid-area: fill;
+  z-index: 1;
 }
-`);
-})();
+`;
 
-const template = new DocumentFragment();
+const styles = new CSSStyleSheet();
+styles.replace(stylesString);
 
-(() => {
-  const canvas = document.createElement("canvas");
-  const div = document.createElement("div");
-  div.classList.add("canvas");
-  div.appendChild(canvas);
-  template.appendChild(div);
-})();
-
-(() => {
-  const slot = document.createElement("slot");
-  const div = document.createElement("div");
-  div.classList.add("content");
-  div.appendChild(slot);
-  template.appendChild(div);
-})();
+const templateString = `
+<div class="canvas">
+  <canvas></canvas>
+</div>
+<div class="content">
+  <slot></slot>
+</div>
+`;
+
+const template = new DocumentFragment();
+template.append(
+  new DOMParser().parseFromString(templateString, "text/html").body,
+);
 
 export default class SquircleCanvas extends HTMLElement {
   _radius = 0;