@picked/svelte 0.0.65-next.4 → 0.0.66-next.1

package/dist/experience/HtmlRender.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  /** @file Renders a resolved html-asset field and re-executes its Picked-tagged scripts. */
-  import { isHtmlAssetValue, rehydrateScripts, supportsWindow } from '@picked/client'
+  /** @file Renders a resolved html-asset field into a shadow root and re-executes its Picked-tagged scripts. */
+  import { isHtmlAssetValue, rehydrateScripts, supportsShadowRoot } from '@picked/client'
 
   interface Props {
     /** The resolved html-asset field value (for example `content.body`). */
@@ -12,16 +12,15 @@
   const value = $derived(isHtmlAssetValue(html) ? html : null)
   const markup = $derived(value?.content ?? '')
 
-  let container = $state<HTMLDivElement>()
+  let host = $state<HTMLDivElement>()
 
   $effect(() => {
-    if (supportsWindow() && container && markup) {
-      void rehydrateScripts(container)
-    }
+    if (!supportsShadowRoot() || !host) return
+
+    const shadow = host.shadowRoot ?? host.attachShadow({ mode: 'open' })
+    shadow.innerHTML = markup
+    if (markup) void rehydrateScripts(shadow)
   })
 </script>
 
-{#key value?.id ?? ''}
-  <!-- eslint-disable-next-line svelte/no-at-html-tags -- markup is a trusted, Picked-transformed html-asset field, not arbitrary user input -->
-  <div bind:this={container}>{@html markup}</div>
-{/key}
+<div bind:this={host}></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@picked/svelte",
-  "version": "0.0.65-next.4",
+  "version": "0.0.66-next.1",
   "dependencies": {
     "d3": "^7.9.0"
   },
@@ -106,7 +106,7 @@
   },
   "module": "./dist/index.js",
   "peerDependencies": {
-    "@picked/client": "0.0.65-next.4",
+    "@picked/client": "0.0.66-next.1",
     "effector": "^23.3.0",
     "svelte": "^5.46.4"
   },