Fix resizing ce-squircle canvas impl

Author: tim-harding

index.html

@@ -42,7 +42,10 @@
       border-radius="16"
       border-width="4"
       border-color="rgb(63, 127, 255)"
-    ></ce-squircle>
+    >
+      <span>Hello,</span>
+      <span>world</span>
+    </ce-squircle>
 
     <script type="module">
       import { register, path, createCustomElement } from "@";

src/index.css

@@ -6,6 +6,22 @@
   border-style: solid;
 }
 
+ce-squircle[impl="canvas"] {
+  display: grid;
+  grid-template-rows: 100%;
+  grid-template-columns: 100%;
+  grid-template-areas: "fill";
+}
+
+ce-squircle[impl="canvas"] > * {
+  grid-area: fill;
+}
+
+.ce-squircle-canvas--canvas {
+  contain: strict;
+  z-index: -1000;
+}
+
 @supports (background: paint(id)) {
   .squircle {
     background: paint(squircle);

src/squircle-canvas.js

@@ -21,8 +21,13 @@ export default class SquircleCanvas extends HTMLElement {
   }
 
   connectedCallback() {
+    this.setAttribute("impl", "canvas");
+
     const canvas = document.createElement("canvas");
-    this.appendChild(canvas);
+    const div = document.createElement("div");
+    div.classList.add("ce-squircle-canvas--canvas");
+    div.appendChild(canvas);
+    this.appendChild(div);
 
     const ctx = canvas.getContext("2d", {});
 

src/squircle-houdini.js

@@ -11,6 +11,7 @@ export default class SquircleHoudini extends HTMLElement {
   }
 
   connectedCallback() {
+    this.setAttribute("impl", "houdini");
     this.classList.add("squircle");
     this.style.display = "grid";
   }