make hull slots reactive

demo/visualizing-set-relations.html

@@ -10,6 +10,7 @@
       }
 
       body {
+        z-index: -1;
         min-height: 100%;
         position: relative;
         margin: 0;
@@ -23,12 +24,6 @@
         display: block;
         position: absolute;
         inset: 0 0 0 0;
-        pointer-events: none;
-        background-color: #b4d8f669;
-
-        * {
-          pointer-events: all;
-        }
       }
 
       h1 {
@@ -46,7 +41,7 @@
 
     <folk-hull sources="h1, body > folk-shape"></folk-hull>
 
-    <folk-hull>
+    <folk-hull sources="h1">
       <folk-shape x="350" y="100" width="50" height="50"></folk-shape>
       <folk-shape x="500" y="200" width="50" height="50"></folk-shape>
       <folk-shape x="400" y="300" width="50" height="50"></folk-shape>

src/folk-hull.ts

@@ -1,12 +1,27 @@
 import { FolkBaseSet } from './folk-base-set';
 import { verticesToPolygon } from './common/utils';
 import type { Point } from './common/types';
+import { css, html } from './common/tags';
+
 declare global {
   interface HTMLElementTagNameMap {
     'folk-hull': FolkHull;
   }
 }
 
+const styles = css`
+  :host {
+    z-index: -1;
+  }
+
+  #hull {
+    background-color: var(--folk-hull-bg, #b4d8f644);
+    height: 100%;
+    width: 100%;
+    pointer-events: none;
+  }
+`;
+
 export class FolkHull extends FolkBaseSet {
   static tagName = 'folk-hull';
 
@@ -16,6 +31,26 @@ export class FolkHull extends FolkBaseSet {
     return this.#hull;
   }
 
+  #shadow = this.attachShadow({ mode: 'open' });
+
+  #slot = document.createElement('slot');
+  #hullEl = document.createElement('div');
+
+  constructor() {
+    super();
+
+    this.#hullEl.id = 'hull';
+
+    this.#shadow.adoptedStyleSheets.push(styles);
+
+    this.#shadow.append(this.#hullEl, this.#slot);
+
+    this.#slot.addEventListener('slotchange', this.#onSlotchange);
+  }
+
+  // we might not need to react to the first slot change
+  #onSlotchange = () => this.observeSources();
+
   update() {
     if (this.sourcesMap.size === 0) {
       this.style.clipPath = '';
@@ -24,7 +59,7 @@ export class FolkHull extends FolkBaseSet {
 
     const rects = Array.from(this.sourcesMap.values());
     this.#hull = makeHull(rects);
-    this.style.clipPath = verticesToPolygon(this.#hull);
+    this.#hullEl.style.clipPath = verticesToPolygon(this.#hull);
   }
 }