use createRenderRoot instead of firstUpdated

src/folk-base-set.ts

@@ -36,12 +36,14 @@ export class FolkBaseSet extends FolkElement {
 
   #slot = document.createElement('slot');
 
-  override firstUpdated(changedProperties: PropertyValues<this>) {
+  override createRenderRoot() {
-    super.firstUpdated(changedProperties);
+    const root = super.createRenderRoot();
 
-    this.renderRoot.append(this.#slot);
+    root.append(this.#slot);
 
     this.#slot.addEventListener('slotchange', this.#onSlotchange);
+
+    return root;
   }
 
   override willUpdate(changedProperties: PropertyValues<this>) {

src/folk-event-propagator.ts

@@ -51,8 +51,8 @@ export class FolkEventPropagator extends FolkRope {
   #container = document.createElement('div');
   #hasError = false;
 
-  override firstUpdated(changedProperties: PropertyValues<this>): void {
+  override createRenderRoot() {
-    super.firstUpdated(changedProperties);
+    const root = super.createRenderRoot();
 
     this.#container.className = 'input-container';
     this.#triggerTextarea.className = 'trigger';
@@ -76,9 +76,10 @@ export class FolkEventPropagator extends FolkRope {
     this.#expressionTextarea.value = this.expression;
 
     this.#container.append(this.#triggerTextarea, this.#expressionTextarea);
-    this.renderRoot.append(this.#container);
 
-    this.#initializePropagator();
+    root.append(this.#container);
+
+    return root;
   }
 
   override updated(changedProperties: PropertyValues<this>): void {

src/folk-hull.ts

@@ -31,12 +31,14 @@ export class FolkHull extends FolkBaseSet {
 
   #hullEl = document.createElement('div');
 
-  override firstUpdated(changedProperties: PropertyValues<this>): void {
+  override createRenderRoot() {
-    super.firstUpdated(changedProperties);
+    const root = super.createRenderRoot();
 
     this.#hullEl.id = 'hull';
 
-    this.renderRoot.prepend(this.#hullEl);
+    root.prepend(this.#hullEl);
+
+    return root;
   }
 
   override update(changedProperties: PropertyValues<this>) {

src/folk-ink.ts

@@ -54,11 +54,13 @@ export class FolkInk extends FolkElement {
   #path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
   #tracingPromise: PromiseWithResolvers<void> | null = null;
 
-  override firstUpdated(changedProperties: PropertyValues): void {
+  override createRenderRoot() {
-    super.firstUpdated(changedProperties);
+    const root = super.createRenderRoot();
 
     this.#svg.appendChild(this.#path);
-    this.renderRoot.appendChild(this.#svg);
+
+    root.appendChild(this.#svg);
+    return root;
   }
 
   getPathBox() {

src/folk-map.ts

@@ -30,10 +30,10 @@ export class FolkMap extends FolkElement {
   #container = document.createElement('div');
   #map = map(this.#container);
 
-  override firstUpdated(changedProperties: PropertyValues): void {
+  override createRenderRoot() {
-    super.firstUpdated(changedProperties);
+    const root = super.createRenderRoot();
 
-    this.renderRoot.appendChild(this.#container);
+    root.appendChild(this.#container);
 
     this.#map.addLayer(
       tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
@@ -46,6 +46,8 @@ export class FolkMap extends FolkElement {
       (this.getAttribute('coordinates') || '0, 0').split(',').map(Number) as LatLngExpression,
       Number(this.getAttribute('zoom') || 13)
     );
+
+    return root;
   }
 
   connectedCallback(): void {

src/folk-rope.ts

@@ -63,12 +63,14 @@ export class FolkRope extends FolkBaseConnection implements AnimationFrameContro
 
   @property({ type: Object }) gravity = { x: 0, y: 3000 };
 
-  override firstUpdated(changedProperties: PropertyValues<this>): void {
+  override createRenderRoot() {
-    super.firstUpdated(changedProperties);
+    const root = super.createRenderRoot();
 
     this.#svg.append(this.#path, this.#path2);
 
-    this.renderRoot.appendChild(this.#svg);
+    root.appendChild(this.#svg);
+
+    return root;
   }
 
   tick() {

src/folk-space-projector.ts

@@ -25,12 +25,14 @@ export class FolkSpaceProjector extends FolkBaseSet {
 
   #spreadsheet = document.createElement('folk-spreadsheet');
 
-  override firstUpdated(changedProperties: PropertyValues<this>): void {
+  override createRenderRoot() {
-    super.firstUpdated(changedProperties);
+    const root = super.createRenderRoot();
 
     this.#spreadsheet.style.setProperty('--cell-width', '50px');
 
-    this.renderRoot.append(this.#spreadsheet);
+    root.append(this.#spreadsheet);
+
+    return root;
   }
 
   connectedCallback(): void {

src/folk-space-radial.ts

@@ -34,12 +34,12 @@ export class FolkSpaceRadial extends FolkBaseSet {
 
   #centerPoint: HTMLDivElement | null = null;
 
-  override firstUpdated(changedProperties: PropertyValues<this>) {
+  override createRenderRoot() {
-    super.firstUpdated(changedProperties);
+    const root = super.createRenderRoot();
 
     this.#centerPoint = document.createElement('div');
     this.#centerPoint.className = 'center-point';
-    this.renderRoot.appendChild(this.#centerPoint);
+    root.appendChild(this.#centerPoint);
 
     // Add transform listeners to source elements
     this.sourceElements.forEach((element) => {
@@ -47,6 +47,8 @@ export class FolkSpaceRadial extends FolkBaseSet {
         element.addEventListener('transform', this.#onTransform);
       }
     });
+
+    return root;
   }
 
   protected override updated(changedProperties: PropertyValues<this>) {

src/folk-space.ts

@@ -49,12 +49,10 @@ export class FolkSpace extends FolkElement {
     }
   `;
 
-  override firstUpdated(changedProperties: PropertyValues): void {
+  override createRenderRoot() {
-    super.firstUpdated(changedProperties);
+    const root = super.createRenderRoot() as ShadowRoot;
 
-    if (!(this.renderRoot instanceof ShadowRoot)) return;
+    root.setHTMLUnsafe(html`
-
-    this.renderRoot.setHTMLUnsafe(html`
       <div class="space">
         <div class="face front">
           <slot name="front"></slot>
@@ -64,6 +62,8 @@ export class FolkSpace extends FolkElement {
         </div>
       </div>
     `);
+
+    return root;
   }
 
   transition() {