Fix shadow root selector

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",

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;

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;