diff --git a/flowifier/src/main/java/htmlflow/flowifier/AbstractHtmlToJavaHtmlFlowNodeVisitor.java b/flowifier/src/main/java/htmlflow/flowifier/AbstractHtmlToJavaHtmlFlowNodeVisitor.java
index 378c6b63..82b65dfc 100644
--- a/flowifier/src/main/java/htmlflow/flowifier/AbstractHtmlToJavaHtmlFlowNodeVisitor.java
+++ b/flowifier/src/main/java/htmlflow/flowifier/AbstractHtmlToJavaHtmlFlowNodeVisitor.java
@@ -435,11 +435,13 @@ private void processGenericNode(final Node node) throws IOException {
     private String escapeInAttribute(final String unescaped) {
         // FIXME ask JSoup's maintainer to expose a public method to escape the
         // value of an attribute
-        return escapeHtmlPreservingApostrophe(unescaped).replace("\"", """);
+        return escapeHtmlPreservingApostrophe(unescaped)
+            .replace("\"", """);
     }
 
     private String escapeText(final String unescaped) {
-        return escapeHtmlPreservingApostrophe(unescaped).replace(""", "\"");
+        return escapeHtmlPreservingApostrophe(unescaped)
+            .replace(""", "\"");
     }
 
     private String escapeHtmlPreservingApostrophe(final String unescaped) {
diff --git a/htmlflow-core/pom.xml b/htmlflow-core/pom.xml
index 74c4cc80..08a6137b 100644
--- a/htmlflow-core/pom.xml
+++ b/htmlflow-core/pom.xml
@@ -91,6 +91,14 @@
             <version>${junit.jupiter-version}</version>
             <scope>test</scope>
         </dependency>
+
+        <!-- Browser automation for the MFE engine e2e tests -->
+        <dependency>
+            <groupId>com.microsoft.playwright</groupId>
+            <artifactId>playwright</artifactId>
+            <version>1.63.0</version>
+            <scope>test</scope>
+        </dependency>
     </dependencies>
 
     <build>
@@ -123,4 +131,34 @@
             </plugin>
         </plugins>
     </build>
+
+    <profiles>
+        <!-- End-to-end tests of htmlflow-mfe-engine: mvn -pl htmlflow-core -am -Pe2e verify -->
+        <profile>
+            <id>e2e</id>
+            <build>
+                <plugins>
+                    <plugin>
+                        <groupId>org.apache.maven.plugins</groupId>
+                        <artifactId>maven-failsafe-plugin</artifactId>
+                        <version>3.5.2</version>
+                        <configuration>
+                            <argLine>-Xmx32m</argLine>
+                            <systemPropertyVariables>
+                                <mfe.engine.dist>${project.basedir}/../htmlflow-mfe-engine/dist</mfe.engine.dist>
+                            </systemPropertyVariables>
+                        </configuration>
+                        <executions>
+                            <execution>
+                                <goals>
+                                    <goal>integration-test</goal>
+                                    <goal>verify</goal>
+                                </goals>
+                            </execution>
+                        </executions>
+                    </plugin>
+                </plugins>
+            </build>
+        </profile>
+    </profiles>
 </project>
\ No newline at end of file
diff --git a/htmlflow-core/src/main/java/htmlflow/visitor/HtmlVisitor.java b/htmlflow-core/src/main/java/htmlflow/visitor/HtmlVisitor.java
index be4fb25a..c6bedd40 100644
--- a/htmlflow-core/src/main/java/htmlflow/visitor/HtmlVisitor.java
+++ b/htmlflow-core/src/main/java/htmlflow/visitor/HtmlVisitor.java
@@ -24,9 +24,15 @@
 
 package htmlflow.visitor;
 
+import static htmlflow.visitor.Tags.*;
+
 import htmlflow.HtmlMfeConfig;
 import htmlflow.exceptions.HtmlFlowAppendException;
 import htmlflow.visitor.escape.HtmlEscapers;
+import java.io.IOException;
+import java.util.ArrayList;
+import java.util.List;
+import java.util.function.Consumer;
 import org.xmlet.htmlapifaster.Area;
 import org.xmlet.htmlapifaster.Base;
 import org.xmlet.htmlapifaster.Br;
@@ -46,13 +52,6 @@
 import org.xmlet.htmlapifaster.Source;
 import org.xmlet.htmlapifaster.Text;
 
-import java.io.IOException;
-import java.util.ArrayList;
-import java.util.List;
-import java.util.function.Consumer;
-
-import static htmlflow.visitor.Tags.*;
-
 /**
  * This is the base implementation of the ElementVisitor (from HtmlApiFaster library).
  *
diff --git a/htmlflow-core/src/test/java/htmlflow/test/e2e/MfeBasicIT.java b/htmlflow-core/src/test/java/htmlflow/test/e2e/MfeBasicIT.java
new file mode 100644
index 00000000..bddb3b14
--- /dev/null
+++ b/htmlflow-core/src/test/java/htmlflow/test/e2e/MfeBasicIT.java
@@ -0,0 +1,61 @@
+package htmlflow.test.e2e;
+
+import static com.microsoft.playwright.assertions.PlaywrightAssertions.assertThat;
+import static org.junit.Assert.assertEquals;
+
+import com.microsoft.playwright.Locator;
+import htmlflow.HtmlFlow;
+import htmlflow.HtmlView;
+import java.util.List;
+import org.junit.AfterClass;
+import org.junit.BeforeClass;
+import org.junit.Test;
+import org.xmlet.htmlapifaster.EnumTypeScriptType;
+
+/** End-to-end test of the compiled htmlflow-mfe-engine (dist/) rendering HtmlFlow MFE views. */
+public class MfeBasicIT extends MfeE2EBase {
+
+    private static final HtmlView<?> HOST_PAGE = HtmlFlow.ViewFactory.builder()
+        .mfeEnabled(true)
+        .preEncoding(true)
+        .build()
+        .view(page -> page
+            .html()
+                .head()
+                    .script().attrType(EnumTypeScriptType.MODULE).attrSrc(ENGINE_URL).__()
+                .__()
+                .body()
+                    .div()
+                        .mfe(cfg -> {
+                            cfg.setMfeUrlResource("/fragment");
+                            cfg.setMfeName("hello");
+                        })
+                    .__()
+                .__()
+            .__());
+
+    private static MfeTestServer server;
+
+    @BeforeClass
+    public static void startServer() throws Exception {
+        server = new MfeTestServer()
+            .html("/", HOST_PAGE::render)
+            .html("/fragment", () -> "<p id=\"greeting\">Hello World</p>")
+            .start();
+    }
+
+    @AfterClass
+    public static void stopServer() {
+        if (server != null) server.stop();
+    }
+
+    @Test
+    public void shouldRenderHelloWorldInsideMicroFrontend() {
+        page.navigate(server.url("/"));
+
+        // Playwright CSS locators pierce open shadow roots
+        Locator mfe = page.locator("micro-frontend[mfe-name='hello']");
+        assertThat(mfe.locator("#greeting")).hasText("Hello World");
+        assertEquals(List.of(), pageErrors);
+    }
+}
diff --git a/htmlflow-core/src/test/java/htmlflow/test/e2e/MfeE2EBase.java b/htmlflow-core/src/test/java/htmlflow/test/e2e/MfeE2EBase.java
new file mode 100644
index 00000000..6864a1ff
--- /dev/null
+++ b/htmlflow-core/src/test/java/htmlflow/test/e2e/MfeE2EBase.java
@@ -0,0 +1,88 @@
+package htmlflow.test.e2e;
+
+import com.microsoft.playwright.Browser;
+import com.microsoft.playwright.BrowserContext;
+import com.microsoft.playwright.Page;
+import com.microsoft.playwright.Playwright;
+import com.microsoft.playwright.Route;
+import java.io.IOException;
+import java.io.InputStream;
+import java.io.UncheckedIOException;
+import java.net.URI;
+import java.nio.file.Path;
+import java.util.ArrayList;
+import java.util.List;
+import org.junit.After;
+import org.junit.AfterClass;
+import org.junit.Before;
+import org.junit.BeforeClass;
+
+/**
+ * Shared Playwright setup for MFE e2e tests.
+ * <ul>
+ *   <li>{@link #ENGINE_URL} is fulfilled from the compiled engine in {@code htmlflow-mfe-engine/dist}.</li>
+ *   <li>{@code /e2e/<name>} is fulfilled from the test classpath resource {@code e2e/<name>} (JS or CSS).</li>
+ * </ul>
+ * Subclasses own their {@link MfeTestServer} (host page and fragments).
+ */
+public abstract class MfeE2EBase {
+
+    protected static final String ENGINE_URL = "/engine/htmlflow-mfe-engine.js";
+    protected static final String TEST_JS_ROUTE = "/e2e/";
+
+    private static final Path ENGINE_FILE = Path.of(
+        System.getProperty("mfe.engine.dist", "../htmlflow-mfe-engine/dist"),
+        "htmlflow-mfe-engine.js"
+    );
+
+    private static Playwright playwright;
+    protected static Browser browser;
+
+    protected BrowserContext context;
+    protected Page page;
+    protected final List<String> pageErrors = new ArrayList<>();
+
+    @BeforeClass
+    public static void launchBrowser() {
+        playwright = Playwright.create();
+        browser = playwright.chromium().launch();
+    }
+
+    @AfterClass
+    public static void closeBrowser() {
+        if (browser != null) browser.close();
+        if (playwright != null) playwright.close();
+    }
+
+    @Before
+    public void openPage() {
+        context = browser.newContext();
+        context.route("**" + ENGINE_URL, route -> route.fulfill(new Route.FulfillOptions()
+            .setContentType("text/javascript")
+            .setPath(ENGINE_FILE)));
+        context.route("**" + TEST_JS_ROUTE + "*", MfeE2EBase::fulfillTestScript);
+        page = context.newPage();
+        page.onPageError(pageErrors::add);
+    }
+
+    @After
+    public void closePage() {
+        if (context != null) context.close();
+    }
+
+    private static void fulfillTestScript(Route route) {
+        String path = URI.create(route.request().url()).getPath();
+        String resource = "e2e/" + path.substring(path.lastIndexOf('/') + 1);
+        try (InputStream in = MfeE2EBase.class.getClassLoader().getResourceAsStream(resource)) {
+            if (in == null) {
+                route.fulfill(new Route.FulfillOptions().setStatus(404).setBody("Not found: " + resource));
+                return;
+            }
+            route.fulfill(new Route.FulfillOptions()
+                .setContentType(resource.endsWith(".css") ? "text/css" : "text/javascript")
+                .setBodyBytes(in.readAllBytes()));
+        } catch (IOException e) {
+            throw new UncheckedIOException(e);
+        }
+    }
+}
diff --git a/htmlflow-core/src/test/java/htmlflow/test/e2e/MfeEventsIT.java b/htmlflow-core/src/test/java/htmlflow/test/e2e/MfeEventsIT.java
new file mode 100644
index 00000000..c877a9d9
--- /dev/null
+++ b/htmlflow-core/src/test/java/htmlflow/test/e2e/MfeEventsIT.java
@@ -0,0 +1,144 @@
+package htmlflow.test.e2e;
+
+import static com.microsoft.playwright.assertions.PlaywrightAssertions.assertThat;
+import static org.junit.Assert.assertEquals;
+
+import com.microsoft.playwright.Locator;
+import htmlflow.HtmlFlow;
+import htmlflow.HtmlView;
+import java.util.List;
+import java.util.concurrent.atomic.AtomicInteger;
+import org.junit.AfterClass;
+import org.junit.Before;
+import org.junit.BeforeClass;
+import org.junit.Test;
+import org.xmlet.htmlapifaster.EnumTypeScriptType;
+
+/**
+ * Two MFEs talking over the engine's event bus:
+ * <ul>
+ *   <li>microfrontend_1 button click -> payload rendered as a list item in microfrontend_2;</li>
+ *   <li>microfrontend_1 button click -> microfrontend_2 reloads itself and shows the new server content.</li>
+ * </ul>
+ */
+public class MfeEventsIT extends MfeE2EBase {
+
+    private static final String EVENT_NAME = "itemAdded";
+
+    private static final HtmlView<?> HOST_PAGE = HtmlFlow.ViewFactory.builder()
+        .mfeEnabled(true)
+        .preEncoding(true)
+        .build()
+        .view(page -> page
+            .html()
+                .head()
+                    .script().attrType(EnumTypeScriptType.MODULE).attrSrc(ENGINE_URL).__()
+                    .script().attrType(EnumTypeScriptType.MODULE).attrSrc(TEST_JS_ROUTE + "mfe-events.js").__()
+                .__()
+                .body()
+                    .div()
+                        .mfe(cfg -> {
+                            cfg.setMfeUrlResource("/fragments/microfrontend_1");
+                            cfg.setMfeName("microfrontend_1");
+                            cfg.setMfeTriggersEventName(EVENT_NAME);
+                        })
+                        .mfe(cfg -> {
+                            cfg.setMfeUrlResource("/fragments/microfrontend_2");
+                            cfg.setMfeName("microfrontend_2");
+                            cfg.setMfeListeningEventName(EVENT_NAME);
+                        })
+                    .__()
+                .__()
+            .__());
+
+    private static final String RELOAD_EVENT_NAME = "reloadRequested";
+
+    private static final HtmlView<?> RELOAD_HOST_PAGE = HtmlFlow.ViewFactory.builder()
+        .mfeEnabled(true)
+        .preEncoding(true)
+        .build()
+        .view(page -> page
+            .html()
+                .head()
+                    .script().attrType(EnumTypeScriptType.MODULE).attrSrc(ENGINE_URL).__()
+                    .script().attrType(EnumTypeScriptType.MODULE).attrSrc(TEST_JS_ROUTE + "mfe-reload.js").__()
+                .__()
+                .body()
+                    .div()
+                        .mfe(cfg -> {
+                            cfg.setMfeUrlResource("/fragments/reload/microfrontend_1");
+                            cfg.setMfeName("microfrontend_1");
+                            cfg.setMfeTriggersEventName(RELOAD_EVENT_NAME);
+                        })
+                        .mfe(cfg -> {
+                            cfg.setMfeUrlResource("/fragments/reload/microfrontend_2");
+                            cfg.setMfeName("microfrontend_2");
+                            cfg.setMfeListeningEventName(RELOAD_EVENT_NAME);
+                        })
+                    .__()
+                .__()
+            .__());
+
+    // Bumped on every microfrontend_2 fetch, so each (re)load returns different content.
+    // AtomicInteger because the server answers on its own threads.
+    private static final AtomicInteger version = new AtomicInteger();
+
+    private static MfeTestServer server;
+
+    @BeforeClass
+    public static void startServer() throws Exception {
+        server = new MfeTestServer()
+            .html("/", HOST_PAGE::render)
+            .html("/fragments/microfrontend_1", () -> "<button id=\"send\">Send item</button>")
+            .html("/fragments/microfrontend_2", () -> "<ul id=\"items\"></ul>")
+            .html("/reload", RELOAD_HOST_PAGE::render)
+            .html("/fragments/reload/microfrontend_1", () -> "<button id=\"reload\">Reload</button>")
+            .html("/fragments/reload/microfrontend_2", () -> "<p id=\"version\">Version " + version.incrementAndGet() + "</p>")
+            .start();
+    }
+
+    @Before
+    public void resetVersion() {
+        version.set(0);
+    }
+
+    @AfterClass
+    public static void stopServer() {
+        if (server != null) server.stop();
+    }
+
+    @Test
+    public void shouldSendEventFromMicrofrontend1AndRenderItemInMicrofrontend2() {
+        page.navigate(server.url("/"));
+
+        Locator mfe1 = page.locator("micro-frontend[mfe-name='microfrontend_1']");
+        Locator mfe2 = page.locator("micro-frontend[mfe-name='microfrontend_2']");
+        assertThat(mfe1.locator("#send")).isVisible();
+        assertThat(mfe2.locator("#items")).isAttached();
+
+        mfe1.locator("#send").click();
+
+        Locator items = mfe2.locator("#items li");
+        assertThat(items).hasCount(1);
+        assertThat(items.first()).hasText("test 1");
+        assertThat(items.first()).hasAttribute("data-id", "1");
+        assertThat(mfe1.locator("li")).hasCount(0);
+        assertEquals(List.of(), pageErrors);
+    }
+
+    @Test
+    public void shouldReloadMicrofrontend2WhenEventIsReceived() {
+        page.navigate(server.url("/reload"));
+
+        Locator mfe1 = page.locator("micro-frontend[mfe-name='microfrontend_1']");
+        Locator mfe2 = page.locator("micro-frontend[mfe-name='microfrontend_2']");
+        assertThat(mfe2.locator("#version")).hasText("Version 1");
+
+        mfe1.locator("#reload").click();
+
+        // New content can only come from re-fetching the fragment
+        assertThat(mfe2.locator("#version")).hasText("Version 2");
+        assertThat(mfe2.locator("#version")).hasCount(1);
+        assertEquals(List.of(), pageErrors);
+    }
+}
diff --git a/htmlflow-core/src/test/java/htmlflow/test/e2e/MfeScriptIntegrityIT.java b/htmlflow-core/src/test/java/htmlflow/test/e2e/MfeScriptIntegrityIT.java
new file mode 100644
index 00000000..72016eab
--- /dev/null
+++ b/htmlflow-core/src/test/java/htmlflow/test/e2e/MfeScriptIntegrityIT.java
@@ -0,0 +1,162 @@
+package htmlflow.test.e2e;
+
+import static com.microsoft.playwright.assertions.PlaywrightAssertions.assertThat;
+import static org.junit.Assert.assertEquals;
+import static org.junit.Assert.assertTrue;
+
+import com.microsoft.playwright.ConsoleMessage;
+import com.microsoft.playwright.Locator;
+import com.microsoft.playwright.Page;
+import com.microsoft.playwright.options.LoadState;
+import htmlflow.HtmlFlow;
+import htmlflow.HtmlView;
+import java.io.IOException;
+import java.io.InputStream;
+import java.io.UncheckedIOException;
+import java.nio.charset.StandardCharsets;
+import java.security.MessageDigest;
+import java.security.NoSuchAlgorithmException;
+import java.util.ArrayList;
+import java.util.Base64;
+import java.util.List;
+import org.junit.AfterClass;
+import org.junit.BeforeClass;
+import org.junit.Test;
+import org.xmlet.htmlapifaster.EnumTypeScriptType;
+
+/**
+ * MFE script loaded through {@code setMfeScriptUrl} with Subresource Integrity ({@code setMfeScriptIntegrity}).
+ * The script (mfe-events.js) wires microfrontend_1's button to add an item to microfrontend_2,
+ * so the click outcome shows whether the browser executed it or blocked it.
+ */
+public class MfeScriptIntegrityIT extends MfeE2EBase {
+
+    private static final String EVENT_NAME = "itemAdded";
+    private static final String SCRIPT_URL = TEST_JS_ROUTE + "mfe-events.js";
+    private static final String SCRIPT_SELECTOR = "head script[src='" + SCRIPT_URL + "']";
+
+    private static final String VALID_INTEGRITY = sha384(readResource("e2e/mfe-events.js"));
+    private static final String INVALID_INTEGRITY = sha384("tampered".getBytes(StandardCharsets.UTF_8));
+
+    private static final HtmlView<?> VALID_HOST_PAGE = hostPage(VALID_INTEGRITY);
+    private static final HtmlView<?> INVALID_HOST_PAGE = hostPage(INVALID_INTEGRITY);
+
+    private static MfeTestServer server;
+
+    private static HtmlView<?> hostPage(String integrity) {
+        return HtmlFlow.ViewFactory.builder()
+            .mfeEnabled(true)
+            .preEncoding(true)
+            .build()
+            .view(page -> page
+                .html()
+                    .head()
+                        .script().attrType(EnumTypeScriptType.MODULE).attrSrc(ENGINE_URL).__()
+                    .__()
+                    .body()
+                        .div()
+                            .mfe(cfg -> {
+                                cfg.setMfeUrlResource("/fragments/microfrontend_1");
+                                cfg.setMfeName("microfrontend_1");
+                                cfg.setMfeTriggersEventName(EVENT_NAME);
+                                cfg.setMfeScriptUrl(SCRIPT_URL);
+                                cfg.setMfeScriptIntegrity(integrity);
+                            })
+                            .mfe(cfg -> {
+                                cfg.setMfeUrlResource("/fragments/microfrontend_2");
+                                cfg.setMfeName("microfrontend_2");
+                                cfg.setMfeListeningEventName(EVENT_NAME);
+                            })
+                        .__()
+                    .__()
+                .__());
+    }
+
+    @BeforeClass
+    public static void startServer() throws Exception {
+        server = new MfeTestServer()
+            .html("/valid", VALID_HOST_PAGE::render)
+            .html("/invalid", INVALID_HOST_PAGE::render)
+            .html("/fragments/microfrontend_1", () -> "<button id=\"send\">Send item</button>")
+            .html("/fragments/microfrontend_2", () -> "<ul id=\"items\"></ul>")
+            .start();
+    }
+
+    @AfterClass
+    public static void stopServer() {
+        if (server != null) server.stop();
+    }
+
+    @Test
+    public void shouldExecuteMfeScriptWhenIntegrityMatches() {
+        List<String> integrityErrors = new ArrayList<>();
+        page.onConsoleMessage(msg -> {
+            if (isIntegrityError(msg)) integrityErrors.add(msg.text());
+        });
+
+        page.navigate(server.url("/valid"));
+
+        Locator script = page.locator(SCRIPT_SELECTOR);
+        assertThat(script).hasAttribute("integrity", VALID_INTEGRITY);
+        assertThat(script).hasAttribute("crossorigin", "anonymous");
+
+        Locator mfe1 = page.locator("micro-frontend[mfe-name='microfrontend_1']");
+        Locator mfe2 = page.locator("micro-frontend[mfe-name='microfrontend_2']");
+        assertThat(mfe2.locator("#items")).isAttached();
+
+        // Only the integrity-checked script wires this click
+        mfe1.locator("#send").click();
+
+        Locator items = mfe2.locator("#items li");
+        assertThat(items).hasCount(1);
+        assertThat(items.first()).hasText("test 1");
+        assertEquals(List.of(), integrityErrors);
+        assertEquals(List.of(), pageErrors);
+    }
+
+    @Test
+    public void shouldBlockMfeScriptWhenIntegrityDoesNotMatch() {
+        // Chromium downloads the script but refuses to run it, reporting it only on the console
+        ConsoleMessage blocked = page.waitForConsoleMessage(
+            new Page.WaitForConsoleMessageOptions().setPredicate(MfeScriptIntegrityIT::isIntegrityError),
+            () -> page.navigate(server.url("/invalid")));
+
+        assertThat(page.locator(SCRIPT_SELECTOR)).hasAttribute("integrity", INVALID_INTEGRITY);
+        assertThat(page.locator(SCRIPT_SELECTOR)).hasAttribute("crossorigin", "anonymous");
+
+        // Fragments still render: the engine itself is not affected
+        Locator mfe1 = page.locator("micro-frontend[mfe-name='microfrontend_1']");
+        Locator mfe2 = page.locator("micro-frontend[mfe-name='microfrontend_2']");
+        assertThat(mfe1.locator("#send")).isVisible();
+        assertThat(mfe2.locator("#items")).isAttached();
+
+        mfe1.locator("#send").click();
+        page.waitForLoadState(LoadState.NETWORKIDLE);
+
+        assertThat(mfe2.locator("#items li")).hasCount(0);
+        assertTrue(blocked.text(), blocked.text().contains("mfe-events.js"));
+        assertEquals(List.of(), pageErrors);
+    }
+
+    private static boolean isIntegrityError(ConsoleMessage msg) {
+        return "error".equals(msg.type()) && msg.text().contains("integrity");
+    }
+
+    private static byte[] readResource(String resource) {
+        try (InputStream in = MfeScriptIntegrityIT.class.getClassLoader().getResourceAsStream(resource)) {
+            if (in == null) throw new IllegalStateException("Missing test resource: " + resource);
+            return in.readAllBytes();
+        } catch (IOException e) {
+            throw new UncheckedIOException(e);
+        }
+    }
+
+    private static String sha384(byte[] content) {
+        try {
+            byte[] digest = MessageDigest.getInstance("SHA-384").digest(content);
+            return "sha384-" + Base64.getEncoder().encodeToString(digest);
+        } catch (NoSuchAlgorithmException e) {
+            throw new IllegalStateException(e);
+        }
+    }
+}
diff --git a/htmlflow-core/src/test/java/htmlflow/test/e2e/MfeSharedStylingIT.java b/htmlflow-core/src/test/java/htmlflow/test/e2e/MfeSharedStylingIT.java
new file mode 100644
index 00000000..769f938d
--- /dev/null
+++ b/htmlflow-core/src/test/java/htmlflow/test/e2e/MfeSharedStylingIT.java
@@ -0,0 +1,135 @@
+package htmlflow.test.e2e;
+
+import static com.microsoft.playwright.assertions.PlaywrightAssertions.assertThat;
+import static org.junit.Assert.assertEquals;
+
+import com.microsoft.playwright.Locator;
+import com.microsoft.playwright.options.LoadState;
+import htmlflow.HtmlFlow;
+import htmlflow.HtmlView;
+import java.util.ArrayList;
+import java.util.List;
+import java.util.regex.Pattern;
+import org.junit.AfterClass;
+import org.junit.BeforeClass;
+import org.junit.Test;
+import org.xmlet.htmlapifaster.EnumTypeScriptType;
+
+/**
+ * Two MFEs sharing one scoped stylesheet (mfe-shared-styling-url) plus their own (mfe-styling-url).
+ * The shared sheet is also adopted onto the host document, so the host shell can use the same theme.
+ */
+public class MfeSharedStylingIT extends MfeE2EBase {
+
+    private static final String SHARED_CSS = TEST_JS_ROUTE + "shared.css";
+    private static final String SHARED_BG = "rgb(255, 99, 71)";
+
+    private static final HtmlView<?> HOST_PAGE = HtmlFlow.ViewFactory.builder()
+        .mfeEnabled(true)
+        .preEncoding(true)
+        .build()
+        .view(page -> page
+            .html()
+                .head()
+                    .script().attrType(EnumTypeScriptType.MODULE).attrSrc(ENGINE_URL).__()
+                .__()
+                .body()
+                    // Same class as in the MFEs, but outside any .mfe-shared scope
+                    .button().attrClass("btn").attrId("host-btn").text("Host button").__()
+                    // Host shell opting into the shared theme by using the scope class
+                    .div().attrClass("mfe-shared")
+                        .button().attrClass("btn").attrId("host-themed-btn").text("Themed host button").__()
+                    .__()
+                    .div()
+                        .mfe(cfg -> {
+                            cfg.setMfeUrlResource("/fragments/microfrontend_1");
+                            cfg.setMfeName("microfrontend_1");
+                            cfg.setMfeSharedStylingUrl(SHARED_CSS);
+                            cfg.setMfeStylingUrl(TEST_JS_ROUTE + "microfrontend_1.css");
+                        })
+                        .mfe(cfg -> {
+                            cfg.setMfeUrlResource("/fragments/microfrontend_2");
+                            cfg.setMfeName("microfrontend_2");
+                            cfg.setMfeSharedStylingUrl(SHARED_CSS);
+                            cfg.setMfeStylingUrl(TEST_JS_ROUTE + "microfrontend_2.css");
+                        })
+                    .__()
+                .__()
+            .__());
+
+    private static MfeTestServer server;
+
+    @BeforeClass
+    public static void startServer() throws Exception {
+        server = new MfeTestServer()
+            .html("/", HOST_PAGE::render)
+            .html("/fragments/microfrontend_1", () -> fragment(1))
+            .html("/fragments/microfrontend_2", () -> fragment(2))
+            .start();
+    }
+
+    @AfterClass
+    public static void stopServer() {
+        if (server != null) server.stop();
+    }
+
+    private static String fragment(int n) {
+        return "<div class=\"mfe-shared\">"
+            + "<p class=\"title\">MFE " + n + "</p>"
+            + "<button class=\"btn\" id=\"btn\">Button " + n + "</button>"
+            + "</div>";
+    }
+
+    @Test
+    public void shouldApplySharedScopedStylingToBothMicrofrontends() {
+        List<String> sharedCssRequests = new ArrayList<>();
+        page.onRequest(req -> {
+            if (req.url().endsWith(SHARED_CSS)) sharedCssRequests.add(req.url());
+        });
+
+        page.navigate(server.url("/"));
+
+        Locator mfe1 = page.locator("micro-frontend[mfe-name='microfrontend_1']");
+        Locator mfe2 = page.locator("micro-frontend[mfe-name='microfrontend_2']");
+
+        // Shared reusable button class applied in both MFEs
+        for (Locator mfe : List.of(mfe1, mfe2)) {
+            Locator btn = mfe.locator("#btn");
+            assertThat(btn).hasCSS("background-color", SHARED_BG);
+            assertThat(btn).hasCSS("border-radius", "8px");
+            assertThat(btn).hasCSS("padding", "8px 16px");
+        }
+
+        // Own stylesheets apply only to their own MFE
+        assertThat(mfe1.locator(".title")).hasCSS("color", "rgb(0, 128, 0)");
+        assertThat(mfe2.locator(".title")).hasCSS("color", "rgb(0, 0, 255)");
+
+        // Shared sheet is also adopted onto document, but @scope keeps it off the host button
+        page.waitForFunction("() => document.adoptedStyleSheets.length === 1");
+        assertThat(page.locator("#host-btn")).not().hasCSS("background-color", SHARED_BG);
+        assertThat(page.locator("#host-btn")).not().hasCSS("border-radius", Pattern.compile("^8px$"));
+
+        page.waitForLoadState(LoadState.NETWORKIDLE); //wait until all network activity has stopped
+        assertEquals("shared.css should be fetched once and cached: " + sharedCssRequests, 1, sharedCssRequests.size());
+        assertEquals(List.of(), pageErrors);
+    }
+
+    @Test
+    public void shouldApplySharedThemeToHostShell() {
+        page.navigate(server.url("/"));
+
+        // Wait until an MFE has loaded the shared sheet and adopted it onto document
+        assertThat(page.locator("micro-frontend[mfe-name='microfrontend_1'] #btn")).hasCSS("background-color", SHARED_BG);
+        page.waitForFunction("() => document.adoptedStyleSheets.length === 1");
+
+        // Host element inside the .mfe-shared scope gets the shared theme
+        Locator themed = page.locator("#host-themed-btn");
+        assertThat(themed).hasCSS("background-color", SHARED_BG);
+        assertThat(themed).hasCSS("border-radius", "8px");
+        assertThat(themed).hasCSS("padding", "8px 16px");
+
+        // Host element outside the scope is untouched
+        assertThat(page.locator("#host-btn")).not().hasCSS("background-color", SHARED_BG);
+        assertEquals(List.of(), pageErrors);
+    }
+}
diff --git a/htmlflow-core/src/test/java/htmlflow/test/e2e/MfeStreamingIT.java b/htmlflow-core/src/test/java/htmlflow/test/e2e/MfeStreamingIT.java
new file mode 100644
index 00000000..229cbd63
--- /dev/null
+++ b/htmlflow-core/src/test/java/htmlflow/test/e2e/MfeStreamingIT.java
@@ -0,0 +1,190 @@
+package htmlflow.test.e2e;
+
+import static com.microsoft.playwright.assertions.PlaywrightAssertions.assertThat;
+import static org.junit.Assert.assertEquals;
+import static org.junit.Assert.assertTrue;
+
+import com.microsoft.playwright.Locator;
+import htmlflow.HtmlFlow;
+import htmlflow.HtmlView;
+import java.time.Duration;
+import java.util.ArrayList;
+import java.util.List;
+import org.junit.AfterClass;
+import org.junit.Before;
+import org.junit.BeforeClass;
+import org.junit.Test;
+import org.xmlet.htmlapifaster.EnumTypeScriptType;
+
+/**
+ * PSSR: the MFE fragment is streamed. A chunk containing {@code <slot>} elements is the wrapper, a chunk
+ * with a {@code slot="x"} element goes into {@code slot[name="x"]} and any other chunk is appended as is.
+ */
+public class MfeStreamingIT extends MfeE2EBase {
+
+    private static final Duration CHUNK_DELAY = Duration.ofMillis(100);
+    private static final String MFE = "micro-frontend[mfe-name='streaming']";
+
+    private static final String WRAPPER_CHUNK = "<div class=\"item-list\"><ul id=\"items\">"
+        + "<slot name=\"item-1\"></slot>"
+        + "<slot name=\"item-2\"></slot>"
+        + "<slot name=\"item-3\"></slot>"
+        + "</ul></div>";
+
+    private static final String SINGLE_SLOT_WRAPPER_CHUNK =
+        "<div class=\"item-list\"><ul id=\"items\"><slot name=\"item-1\"></slot></ul></div>";
+
+    private static MfeTestServer server;
+
+    private final List<String> consoleErrors = new ArrayList<>();
+
+    /** Host page with a single streaming MFE fetching {@code fragmentUrl}. */
+    private static HtmlView<?> hostPage(String fragmentUrl) {
+        return HtmlFlow.ViewFactory.builder()
+            .mfeEnabled(true)
+            .preEncoding(true)
+            .build()
+            .view(page -> page
+                .html()
+                    .head()
+                        .script().attrType(EnumTypeScriptType.MODULE).attrSrc(ENGINE_URL).__()
+                    .__()
+                    .body()
+                        .div()
+                            .mfe(cfg -> {
+                                cfg.setMfeUrlResource(fragmentUrl);
+                                cfg.setMfeName("streaming");
+                                cfg.setMfeStreamingData(true);
+                            })
+                        .__()
+                    .__()
+                .__());
+    }
+
+    @BeforeClass
+    public static void startServer() throws Exception {
+        HtmlView<?> inOrder = hostPage("/fragments/items");
+        HtmlView<?> outOfOrder = hostPage("/fragments/out-of-order");
+        HtmlView<?> plain = hostPage("/fragments/plain");
+        HtmlView<?> missingSlot = hostPage("/fragments/missing-slot");
+        server = new MfeTestServer()
+            .html("/", inOrder::render)
+            .stream("/fragments/items", CHUNK_DELAY,
+                WRAPPER_CHUNK, itemChunk(1), itemChunk(2), itemChunk(3))
+            .html("/out-of-order", outOfOrder::render)
+            .stream("/fragments/out-of-order", CHUNK_DELAY,
+                WRAPPER_CHUNK, itemChunk(3), itemChunk(1), itemChunk(2))
+            .html("/plain", plain::render)
+            .stream("/fragments/plain", CHUNK_DELAY,
+                lineChunk(1), lineChunk(2), lineChunk(3))
+            .html("/missing-slot", missingSlot::render)
+            .stream("/fragments/missing-slot", CHUNK_DELAY,
+                SINGLE_SLOT_WRAPPER_CHUNK, itemChunk(1), itemChunk(9))
+            .start();
+    }
+
+    @AfterClass
+    public static void stopServer() {
+        if (server != null) server.stop();
+    }
+
+    @Before
+    public void collectConsoleErrors() {
+        page.onConsoleMessage(msg -> {
+            if ("error".equals(msg.type())) consoleErrors.add(msg.text());
+        });
+    }
+
+    private static String itemChunk(int n) {
+        return "<li slot=\"item-" + n + "\" data-id=\"" + n + "\">Item " + n + "</li>";
+    }
+
+    private static String lineChunk(int n) {
+        return "<p class=\"line\">Line " + n + "</p>";
+    }
+
+    private List<String> slotErrors() {
+        return consoleErrors.stream().filter(text -> text.contains("<slot")).toList();
+    }
+
+    private void assertItemsInTheirSlots(Locator list, int... ids) {
+        for (int n : ids) {
+            Locator item = list.locator("slot[name='item-" + n + "'] > li");
+            assertThat(item).hasCount(1);
+            assertThat(item).hasText("Item " + n);
+            assertThat(item).hasAttribute("data-id", String.valueOf(n));
+        }
+    }
+
+    @Test
+    public void shouldRenderStreamedItemsIntoTheirSlots() {
+        page.navigate(server.url("/"));
+
+        Locator mfe = page.locator(MFE);
+
+        // Wrapper chunk
+        Locator list = mfe.locator(".item-list > ul#items");
+        assertThat(list).isAttached();
+        assertThat(list.locator("> slot")).hasCount(3);
+
+        // Item chunks, in order
+        Locator items = list.locator("li");
+        assertThat(items).hasCount(3);
+        assertEquals(List.of("Item 1", "Item 2", "Item 3"), items.allTextContents());
+
+        assertItemsInTheirSlots(list, 1, 2, 3);
+        assertEquals(List.of(), pageErrors);
+        assertEquals(List.of(), slotErrors());
+    }
+
+    @Test
+    public void shouldPlaceOutOfOrderChunksIntoTheirSlots() {
+        page.navigate(server.url("/out-of-order"));
+
+        Locator list = page.locator(MFE).locator(".item-list > ul#items");
+
+        // Arrival order is 3, 1, 2 but the slots fix the rendered order
+        Locator items = list.locator("li");
+        assertThat(items).hasCount(3);
+        assertEquals(List.of("Item 1", "Item 2", "Item 3"), items.allTextContents());
+
+        assertItemsInTheirSlots(list, 1, 2, 3);
+        assertEquals(List.of(), pageErrors);
+        assertEquals(List.of(), slotErrors());
+    }
+
+    @Test
+    public void shouldAppendChunksWithoutSlotsInArrivalOrder() {
+        page.navigate(server.url("/plain"));
+
+        Locator mfe = page.locator(MFE);
+
+        Locator lines = mfe.locator("p.line");
+        assertThat(lines).hasCount(3);
+        assertEquals(List.of("Line 1", "Line 2", "Line 3"), lines.allTextContents());
+
+        // No wrapper involved and the loading placeholder was cleared
+        assertThat(mfe.locator("slot")).hasCount(0);
+        assertThat(mfe).not().containsText("Loading");
+        assertEquals(List.of(), pageErrors);
+        assertEquals(List.of(), slotErrors());
+    }
+
+    @Test
+    public void shouldReportChunkTargetingMissingSlot() {
+        page.navigate(server.url("/missing-slot"));
+
+        Locator mfe = page.locator(MFE);
+        Locator list = mfe.locator(".item-list > ul#items");
+
+        assertItemsInTheirSlots(list, 1);
+
+        // item-9 has no matching slot: it is reported and not rendered
+        page.waitForCondition(() -> !slotErrors().isEmpty());
+        assertEquals(1, slotErrors().size());
+        assertTrue(slotErrors().get(0), slotErrors().get(0).contains("No <slot name=\"item-9\">"));
+        assertThat(mfe.locator("li")).hasCount(1);
+        assertThat(mfe).not().containsText("Item 9");
+        assertEquals(List.of(), pageErrors);
+    }
+}
diff --git a/htmlflow-core/src/test/java/htmlflow/test/e2e/MfeTestServer.java b/htmlflow-core/src/test/java/htmlflow/test/e2e/MfeTestServer.java
new file mode 100644
index 00000000..b48dfc4c
--- /dev/null
+++ b/htmlflow-core/src/test/java/htmlflow/test/e2e/MfeTestServer.java
@@ -0,0 +1,84 @@
+package htmlflow.test.e2e;
+
+import com.sun.net.httpserver.HttpExchange;
+import com.sun.net.httpserver.HttpServer;
+import java.io.IOException;
+import java.io.OutputStream;
+import java.net.InetSocketAddress;
+import java.nio.charset.StandardCharsets;
+import java.time.Duration;
+import java.util.concurrent.ExecutorService;
+import java.util.concurrent.Executors;
+import java.util.function.Supplier;
+
+/** Minimal server for MFE e2e tests: serves the host page and the MFE fragments. */
+public final class MfeTestServer {
+
+    private final HttpServer server;
+    // Lets a slow streaming response run without blocking other requests
+    private final ExecutorService executor = Executors.newCachedThreadPool();
+
+    public MfeTestServer() throws IOException {
+        this.server = HttpServer.create(new InetSocketAddress("127.0.0.1", 0), 0);
+        this.server.setExecutor(executor);
+    }
+
+    public MfeTestServer html(String path, Supplier<String> body) {
+        server.createContext(path, ex -> {
+            // HttpServer contexts match by prefix, so enforce an exact path match
+            if (!ex.getRequestURI().getPath().equals(path)) {
+                send(ex, 404, "text/plain", "Not found".getBytes(StandardCharsets.UTF_8));
+                return;
+            }
+            send(ex, 200, "text/html; charset=utf-8", body.get().getBytes(StandardCharsets.UTF_8));
+        });
+        return this;
+    }
+
+    /**
+     * Streams {@code chunks} as separate HTTP chunks (chunked transfer encoding), flushing each one and
+     * pausing {@code delay} before the next, so the browser receives them as separate reads.
+     */
+    public MfeTestServer stream(String path, Duration delay, String... chunks) {
+        server.createContext(path, ex -> {
+            if (!ex.getRequestURI().getPath().equals(path)) {
+                send(ex, 404, "text/plain", "Not found".getBytes(StandardCharsets.UTF_8));
+                return;
+            }
+            ex.getResponseHeaders().set("Content-Type", "text/html; charset=utf-8");
+            ex.sendResponseHeaders(200, 0);
+            try (OutputStream os = ex.getResponseBody()) {
+                for (int i = 0; i < chunks.length; i++) {
+                    if (i > 0) Thread.sleep(delay.toMillis());
+                    os.write(chunks[i].getBytes(StandardCharsets.UTF_8));
+                    os.flush();
+                }
+            } catch (InterruptedException e) {
+                Thread.currentThread().interrupt();
+            }
+        });
+        return this;
+    }
+
+    public MfeTestServer start() {
+        server.start();
+        return this;
+    }
+
+    public String url(String path) {
+        return "http://127.0.0.1:" + server.getAddress().getPort() + path;
+    }
+
+    private static void send(HttpExchange ex, int status, String type, byte[] body) throws IOException {
+        ex.getResponseHeaders().set("Content-Type", type);
+        ex.sendResponseHeaders(status, body.length);
+        try (OutputStream os = ex.getResponseBody()) {
+            os.write(body);
+        }
+    }
+
+    public void stop() {
+        server.stop(0);
+        executor.shutdownNow();
+    }
+}
diff --git a/htmlflow-core/src/test/resources/e2e/mfe-events.js b/htmlflow-core/src/test/resources/e2e/mfe-events.js
new file mode 100644
index 00000000..2509a22a
--- /dev/null
+++ b/htmlflow-core/src/test/resources/e2e/mfe-events.js
@@ -0,0 +1,17 @@
+// Wiring for MfeEventsIT. Fragments are sanitized (no <script>), so the host page loads this module.
+
+window.mfe('microfrontend_1', (ctx) => {
+    ctx.root.querySelector('#send').addEventListener('click', () => {
+        ctx.triggerMfeEvent('item added', { id: 1, item: 'test 1' });
+    });
+});
+
+window.mfe('microfrontend_2', (ctx) => {
+    ctx.listenMfeEvent((event) => {
+        const { id, item } = event.detail.payload;
+        const li = document.createElement('li');
+        li.dataset.id = String(id);
+        li.textContent = item;
+        ctx.root.querySelector('#items').append(li);
+    });
+});
diff --git a/htmlflow-core/src/test/resources/e2e/mfe-reload.js b/htmlflow-core/src/test/resources/e2e/mfe-reload.js
new file mode 100644
index 00000000..14b9327d
--- /dev/null
+++ b/htmlflow-core/src/test/resources/e2e/mfe-reload.js
@@ -0,0 +1,11 @@
+// Wiring for MfeEventsIT reload test. Fragments are sanitized (no <script>), so the host page loads this module.
+
+mfe('microfrontend_1', (ctx) => {
+    ctx.root.querySelector('#reload').addEventListener('click', () => {
+        ctx.triggerMfeEvent('reload requested', {});
+    });
+});
+
+mfe('microfrontend_2', (ctx) => {
+    ctx.listenMfeEvent(() => ctx.reloadMfe());
+});
diff --git a/htmlflow-core/src/test/resources/e2e/microfrontend_1.css b/htmlflow-core/src/test/resources/e2e/microfrontend_1.css
new file mode 100644
index 00000000..82e0dfe1
--- /dev/null
+++ b/htmlflow-core/src/test/resources/e2e/microfrontend_1.css
@@ -0,0 +1 @@
+.title { color: rgb(0, 128, 0); }
diff --git a/htmlflow-core/src/test/resources/e2e/microfrontend_2.css b/htmlflow-core/src/test/resources/e2e/microfrontend_2.css
new file mode 100644
index 00000000..16eda044
--- /dev/null
+++ b/htmlflow-core/src/test/resources/e2e/microfrontend_2.css
@@ -0,0 +1 @@
+.title { color: rgb(0, 0, 255); }
diff --git a/htmlflow-core/src/test/resources/e2e/shared.css b/htmlflow-core/src/test/resources/e2e/shared.css
new file mode 100644
index 00000000..b4bf1022
--- /dev/null
+++ b/htmlflow-core/src/test/resources/e2e/shared.css
@@ -0,0 +1,8 @@
+/* Reusable button shared by every MFE. @scope keeps it inside .mfe-shared containers only. */
+@scope (.mfe-shared) {
+    .btn {
+        background-color: rgb(255, 99, 71);
+        border-radius: 8px;
+        padding: 8px 16px;
+    }
+}
diff --git a/htmlflow-mfe-engine/dist/htmlflow-mfe-engine.js b/htmlflow-mfe-engine/dist/htmlflow-mfe-engine.js
index 5479d571..ea768c6c 100644
--- a/htmlflow-mfe-engine/dist/htmlflow-mfe-engine.js
+++ b/htmlflow-mfe-engine/dist/htmlflow-mfe-engine.js
@@ -1,445 +1 @@
-// src/modules/theme-loader.ts
-var styleSheetCache = /* @__PURE__ */ new Map();
-async function adoptStylesheet(target, url) {
-  const sheet = await loadStylesheet(url);
-  if (!target.adoptedStyleSheets.includes(sheet)) {
-    target.adoptedStyleSheets = [...target.adoptedStyleSheets, sheet];
-  }
-}
-function loadStylesheet(url) {
-  let pending = styleSheetCache.get(url);
-  if (!pending) {
-    pending = fetchAndParse(url).catch((err) => {
-      styleSheetCache.delete(url);
-      throw err;
-    });
-    styleSheetCache.set(url, pending);
-  }
-  return pending;
-}
-async function fetchAndParse(url) {
-  const res = await fetch(url);
-  if (!res.ok) {
-    throw new Error(`Failed to fetch stylesheet "${url}": ${res.status}`);
-  }
-  const css = await res.text();
-  const sheet = new CSSStyleSheet();
-  sheet.replaceSync(css);
-  return sheet;
-}
-
-// src/modules/html-sanitizer.ts
-var ALLOWED_ELEMENTS = [
-  // Structural / sectioning
-  "div",
-  "span",
-  "main",
-  "section",
-  "article",
-  "aside",
-  "nav",
-  "header",
-  "footer",
-  // Headings
-  "h1",
-  "h2",
-  "h3",
-  "h4",
-  "h5",
-  "h6",
-  // Text content
-  "p",
-  "br",
-  "hr",
-  "blockquote",
-  "pre",
-  "code",
-  "em",
-  "strong",
-  "small",
-  "b",
-  "i",
-  "u",
-  "mark",
-  "sub",
-  "sup",
-  "abbr",
-  "cite",
-  "q",
-  "time",
-  // Lists
-  "ul",
-  "ol",
-  "li",
-  "dl",
-  "dt",
-  "dd",
-  // Tables
-  "table",
-  "thead",
-  "tbody",
-  "tfoot",
-  "tr",
-  "th",
-  "td",
-  "caption",
-  "colgroup",
-  "col",
-  // Forms & interactive
-  "form",
-  "input",
-  "button",
-  "select",
-  "option",
-  "optgroup",
-  "textarea",
-  "label",
-  "fieldset",
-  "legend",
-  "output",
-  "datalist",
-  // Media & embedded
-  "img",
-  "picture",
-  "source",
-  "figure",
-  "figcaption",
-  "video",
-  "audio",
-  // Links & resources
-  "a",
-  "link",
-  // Misc
-  "details",
-  "summary",
-  "template",
-  "slot",
-  "data",
-  "meter",
-  "progress"
-];
-function createSafeHtml(html) {
-  const template = document.createElement("template");
-  if ("setHTML" in Element.prototype) {
-    template.setHTML(html, { sanitizer: { elements: ALLOWED_ELEMENTS } });
-  } else {
-    template.setHTMLUnsafe(html);
-  }
-  return template;
-}
-
-// src/htmlflow-mfe-engine.ts
-var MfcEventType = /* @__PURE__ */ ((MfcEventType2) => {
-  MfcEventType2["RELOAD"] = "RELOAD";
-  return MfcEventType2;
-})(MfcEventType || {});
-var MfeReloadEvent = class extends CustomEvent {
-  constructor(type = "RELOAD" /* RELOAD */) {
-    super("reload", { detail: { type } });
-  }
-};
-var Mfe = class _Mfe extends HTMLElement {
-  constructor() {
-    super();
-    this.mfeReady = false;
-    this.mfeName = "";
-    this.mfeUrlResource = "";
-    this.mfeListeningEventName = "";
-    this.mfeTriggerEventName = "";
-    /** Suffix appended to `mfeName` to form the "fragment ready" event name on the event bus. */
-    this.readyEventSuffix = "-fragment-ready";
-    this.mfeStylingUrl = "";
-    this.mfeSharedStylingUrl = "";
-    this.isMfeStreamingData = "";
-    /** Aborts any in-flight non-streaming fetch when a new load/reload starts. */
-    this.abortController = null;
-    /** Bound once so the same function reference can be added/removed as an event listener. */
-    this.bindReload = this.reloadFragment.bind(this);
-    /** Listeners registered via {@link createContext}'s `listenMfeEvent`, tracked for cleanup on reload/disconnect. */
-    this.windowListeners = [];
-    this.attachShadow({ mode: "open" });
-  }
-  static {
-    // prevent new reference
-    /** Maps `mfeName` -> live instance, so {@link onReady} can look up an already-connected fragment. */
-    this.registry = /* @__PURE__ */ new Map();
-  }
-  static {
-    /** Buffers `onReady` callbacks registered before their target fragment has connected/registered itself. */
-    this.pendingCallBacks = /* @__PURE__ */ new Map();
-  }
-  static {
-    /** Single event bus shared by every `<micro-frontend>` instance on the page. */
-    this.mfeEventBus = new EventTarget();
-  }
-  /** Removes every listener registered through this fragment's `MfeContext`, then clears the tracking list. */
-  cleanupWindowListeners() {
-    this.windowListeners.forEach(({ eventName, handler }) => {
-      _Mfe.mfeEventBus.removeEventListener(eventName, handler);
-    });
-    this.windowListeners = [];
-  }
-  /**
-   * Standard custom element lifecycle hook. Reads configuration attributes, wires up the
-   * reload listener, validates required attributes, registers this instance so
-   * {@link onReady} can find it, flushes any callbacks that were queued before this fragment
-   * connected, and kicks off the initial fragment load.
-   */
-  connectedCallback() {
-    this.collectMfeAttributes();
-    if (this.mfeListeningEventName) {
-      console.log(this.mfeListeningEventName);
-      _Mfe.mfeEventBus.addEventListener(this.mfeListeningEventName, this.bindReload);
-    }
-    if (!this.mfeUrlResource) {
-      console.error(`MFE -> ${this.mfeName} is missing the "mfe-url" attribute.`);
-      return;
-    }
-    if (!this.mfeName) {
-      console.error(`MFE -> ${this.mfeName} is missing the "mfe-name" attribute. The ready event will be dispatched with an undefined name.`);
-      return;
-    }
-    if (!this.mfeTriggerEventName) {
-      console.error(`MFE -> ${this.mfeName} is missing the "mfe-trigger-event" attribute. The fragment will not be able to trigger any custom events.`);
-    }
-    if (!this.mfeListeningEventName) {
-      console.error(`MFE -> ${this.mfeName} is missing the "mfe-listen-event" attribute. The fragment will not reload on any event.`);
-    }
-    if (!this.mfeStylingUrl) {
-      console.warn(`MFE -> ${this.mfeName} is missing the "mfe-styling-url" attribute. The fragment will not fetch any custom styling.`);
-    }
-    this.shadowRoot?.appendChild(document.createTextNode(`Loading ${this.mfeName}...`));
-    _Mfe.registry.set(this.mfeName, this);
-    _Mfe.pendingCallBacks.get(this.mfeName)?.forEach((cb) => this.onInit(cb));
-    _Mfe.pendingCallBacks.delete(this.mfeName);
-    this.loadFragment();
-  }
-  /** Reads and stores all `mfe-*` configuration attributes from the host element. */
-  collectMfeAttributes() {
-    this.mfeUrlResource = this.getAttribute("mfe-url");
-    this.mfeName = this.getAttribute("mfe-name");
-    this.mfeStylingUrl = this.getAttribute("mfe-styling-url");
-    this.mfeSharedStylingUrl = this.getAttribute("mfe-shared-styling-url");
-    this.mfeListeningEventName = this.getAttribute("mfe-listen-event");
-    this.mfeTriggerEventName = this.getAttribute("mfe-trigger-event");
-    this.isMfeStreamingData = this.getAttribute("mfe-stream-data");
-  }
-  /**
-   * Registers a callback to run once this fragment is ready. If it's already ready, the
-   * callback runs synchronously with the current context; otherwise it's deferred until the
-   * fragment's "ready" event fires on the shared event bus (at which point any listeners
-   * registered through a previous context are also cleaned up, since a new context will be
-   * created for this callback).
-   */
-  onInit(callBackFn) {
-    if (this.mfeReady && this.shadowRoot) {
-      callBackFn(this.createContext(this.shadowRoot));
-    } else _Mfe.mfeEventBus.addEventListener(this.mfeName + this.readyEventSuffix, () => {
-      this.cleanupWindowListeners();
-      callBackFn(this.createContext(this.shadowRoot));
-    });
-  }
-  /** Builds the {@link MfeContext} object handed to `onInit`/`mfe()` callbacks for this fragment. */
-  createContext(root) {
-    return {
-      root,
-      triggerMfeEvent: (message, payload, eventName) => this.triggerEvent(eventName ?? this.mfeTriggerEventName, message, payload),
-      listenMfeEvent: (listener, eventName) => {
-        const evName = eventName ?? this.mfeListeningEventName;
-        _Mfe.mfeEventBus.addEventListener(evName, listener);
-        this.windowListeners.push({ eventName: evName, handler: listener });
-      },
-      reloadMfe: () => this.reloadFragment(new MfeReloadEvent()),
-      mfeEvents: MfcEventType
-    };
-  }
-  /**
-   * Looks up the named fragment and invokes `onInit` on it if it has already connected;
-   * otherwise queues the callback in {@link pendingCallBacks} until a fragment with that
-   * name connects and drains the queue (see {@link connectedCallback}).
-   */
-  static onReady(mfeName, cbFn) {
-    const mfeInstance = _Mfe.registry.get(mfeName);
-    if (mfeInstance) {
-      mfeInstance.onInit(cbFn);
-    } else {
-      const queue = _Mfe.pendingCallBacks.get(mfeName) ?? [];
-      queue.push(cbFn);
-      _Mfe.pendingCallBacks.set(mfeName, queue);
-    }
-  }
-  /**
-   * Fetches this fragment's full HTML in one buffered request, used by
-   * {@link loadFragment} when `mfe-stream-data` is not `"true"`. Aborts any previous in-flight
-   * fetch first, so overlapping requests do not create race conditions.
-   * @returns the response body text, or undefined if no `mfe-url` is configured.
-   */
-  async fetchData() {
-    this.abortController?.abort();
-    this.abortController = new AbortController();
-    if (this.mfeUrlResource) {
-      const response = await fetch(this.mfeUrlResource, {
-        signal: this.abortController.signal
-      });
-      if (!response.ok) {
-        throw new Error(`Failed to fetch ${this.mfeUrlResource}: ${response.status}`);
-      }
-      return response.text();
-    }
-  }
-  /**
-   * Fetches and incrementally renders this fragment's HTML as it streams in, used by
-   * {@link loadFragment} when `mfe-stream-data` is `"true"`. Clears any previous content,
-   * adopts stylesheets up front, then for each decoded chunk: the first chunk containing a
-   * slot element defined is treated as the container markup and appended directly to the shadow
-   * root. It must include any `<slot name="x">` placeholders the later chunks target,
-   * subsequent chunks carrying a `slot="x"` attribute are appended as that slot's fallback
-   * content (looked up via `slot[name="x"]`) rather than via native slot *assignment*, since
-   * nothing is placed in light DOM. Any other chunk is appended directly to the shadow root.
-   */
-  async fetchStreamData() {
-    const decoder = new TextDecoder();
-    if (this.shadowRoot) {
-      this.shadowRoot.replaceChildren();
-    }
-    this.adoptStyleSheets();
-    if (this.mfeUrlResource) {
-      const response = await fetch(this.mfeUrlResource);
-      if (!response.ok) {
-        throw new Error(`[micro-frontend "${this.mfeName}"] fetch failed: ${response.status}`);
-      }
-      if (response.body) {
-        for await (const value of response.body) {
-          const chunk = decoder.decode(new Uint8Array(value), { stream: true });
-          const node = createSafeHtml(chunk);
-          if (node.content.querySelector("slot")) {
-            this.shadowRoot?.append(node.content);
-            continue;
-          } else {
-            console.error("No <slot> elements were found in the wrapper, content wont be rendered correctly.");
-          }
-          const slotted = node.content.querySelector("[slot]");
-          if (slotted) {
-            const slotName = slotted.getAttribute("slot");
-            this.shadowRoot?.querySelector(`slot[name="${slotName}"]`)?.append(node.content);
-          } else {
-            this.shadowRoot?.append(node.content);
-          }
-        }
-      }
-    }
-  }
-  /**
-   * Loads this fragment's configured
-   * stylesheets, then assigns them to the shadow root's `adoptedStyleSheets`. Both URLs are
-   * fetched/parsed concurrently via {@link loadStylesheet} promise cache; failures on either URL are
-   * caught and logged, resolving to `null` so one broken stylesheet doesn't block the other.
-   * The shared stylesheet is also adopted onto `document.adoptedStyleSheets` (via
-   * {@link adoptStylesheet}) so the host shell picks up the same theme.
-   */
-  adoptStyleSheets() {
-    if (!this.mfeSharedStylingUrl && !this.mfeStylingUrl) {
-      return;
-    }
-    const safeLoadStylesheet = (url, label) => url ? loadStylesheet(url).catch((err) => {
-      console.error(`Failed to load ${label}`, err);
-      return null;
-    }) : Promise.resolve(null);
-    const sharedSheet$ = safeLoadStylesheet(this.mfeSharedStylingUrl, "shared stylesheet");
-    const ownSheet$ = safeLoadStylesheet(this.mfeStylingUrl, `stylesheet for MFE -> ${this.mfeName}`);
-    if (this.mfeSharedStylingUrl) {
-      adoptStylesheet(document, this.mfeSharedStylingUrl).catch((err) => console.error(`Failed to adopt shared theme onto document for MFE -> ${this.mfeName}`, err));
-    }
-    Promise.all([sharedSheet$, ownSheet$]).then(([sharedSheet, ownSheet]) => {
-      if (this.shadowRoot) {
-        this.shadowRoot.adoptedStyleSheets = [sharedSheet, ownSheet].filter((sheet) => sheet !== null);
-      }
-    });
-  }
-  /**
-   * Renders a fully-buffered HTML string into the shadow root: clears
-   * any previous content, sanitizes the HTML via {@link createSafeHtml}, adopts stylesheets,
-   * then appends the sanitized fragment.
-   */
-  buildFragment(html) {
-    if (this.shadowRoot) {
-      this.shadowRoot.replaceChildren();
-    }
-    const fragment = createSafeHtml(html);
-    this.adoptStyleSheets();
-    this.shadowRoot?.append(fragment.content);
-  }
-  /**
-   * Dispatches a custom event on the shared MFE event bus, carrying `message`/`payload` in
-   * `detail`. Used both internally (e.g. reload signaling) and via {@link MfeContext.triggerMfeEvent}.
-   */
-  triggerEvent(eventName, message, payload) {
-    const event = new CustomEvent(eventName, {
-      detail: { message, payload }
-    });
-    _Mfe.mfeEventBus.dispatchEvent(event);
-  }
-  /**
-   * Event bus handler bound to `mfe-listen-event`; re-triggers {@link loadFragment} when the
-   * received event is an {@link MfeReloadEvent} whose `detail.type` is {@link MfcEventType.RELOAD}
-   */
-  reloadFragment(event) {
-    if (event instanceof MfeReloadEvent) {
-      this.mfeReady = false;
-      if (event.detail.type === "RELOAD" /* RELOAD */) {
-        this.loadFragment();
-      }
-    }
-  }
-  /**
-   * Dispatches to either {@link fetchStreamData} or {@link fetchData} + {@link buildFragment}
-   * and emits the "fragment ready" event once rendering completes.
-   */
-  loadFragment() {
-    if (this.isMfeStreamingData === "true") {
-      this.fetchStreamData().then((r) => this.emitFragmentReadiness()).catch((err) => {
-        this.shadowRoot?.appendChild(document.createTextNode(`Failed to fetch: ${this.mfeName}`));
-        console.error(`An error occured for MFE -> ${this.mfeName}`, err);
-      });
-    } else {
-      this.fetchData().then((r) => {
-        if (r) {
-          this.buildFragment(r);
-          this.emitFragmentReadiness();
-        }
-      }).catch((err) => {
-        this.shadowRoot?.appendChild(document.createTextNode(`Failed to fetch: ${this.mfeName}`));
-        console.error(`An error occured for MFE -> ${this.mfeName}`, err);
-      });
-    }
-  }
-  /** Marks this fragment ready and dispatches its "fragment ready" event on the shared bus, triggering any pending `onInit`/`onReady` callbacks. */
-  emitFragmentReadiness() {
-    this.mfeReady = true;
-    console.info(`Dispatching ${this.mfeName}${this.readyEventSuffix} event!`);
-    _Mfe.mfeEventBus.dispatchEvent(new Event(this.mfeName + this.readyEventSuffix));
-  }
-  /** Standard custom element lifecycle hook: cleans up event listeners and aborts any in-flight fetch when this fragment is removed from the page. */
-  disconnectedCallback() {
-    this.cleanupWindowListeners();
-    console.log(`MFE -> ${this.mfeName} removed from page.`);
-    if (this.mfeListeningEventName) _Mfe.mfeEventBus.removeEventListener(this.mfeListeningEventName, this.bindReload);
-    this.abortController?.abort();
-  }
-  adoptedCallback() {
-    console.log(`MFE -> ${this.mfeName} moved to new page.`);
-  }
-  /**
-   * Instance-level alias for {@link onReady}, allowing a fragment reference to be obtained
-   * through element query selection to still.
-   */
-  mfe(name, callback) {
-    _Mfe.onReady(name, callback);
-  }
-};
-window.customElements.define("micro-frontend", Mfe);
-window.mfe = (name, callbackFn) => Mfe.onReady(name, callbackFn);
-var htmlflow_mfe_engine_default = Mfe;
-export {
-  htmlflow_mfe_engine_default as default
-};
+var m=new Map;async function u(t,i){let e=await d(i);t.adoptedStyleSheets.includes(e)||(t.adoptedStyleSheets=[...t.adoptedStyleSheets,e])}function d(t){let i=m.get(t);return i||(i=v(t).catch(e=>{throw m.delete(t),e}),m.set(t,i)),i}async function v(t){let i=await fetch(t);if(!i.ok)throw new Error(`Failed to fetch stylesheet "${t}": ${i.status}`);let e=await i.text(),n=new CSSStyleSheet;return n.replaceSync(e),n}var y=["div","span","main","section","article","aside","nav","header","footer","h1","h2","h3","h4","h5","h6","p","br","hr","blockquote","pre","code","em","strong","small","b","i","u","mark","sub","sup","abbr","cite","q","time","ul","ol","li","dl","dt","dd","table","thead","tbody","tfoot","tr","th","td","caption","colgroup","col","form","input","button","select","option","optgroup","textarea","label","fieldset","legend","output","datalist","img","picture","source","figure","figcaption","video","audio","a","link","details","summary","template","slot","data","meter","progress"];function f(t){let i=document.createElement("template");return"setHTML"in Element.prototype?i.setHTML(t,{sanitizer:{elements:y}}):i.setHTMLUnsafe(t),i}var p=(i=>(i.RELOAD="RELOAD",i))(p||{}),h=class extends CustomEvent{constructor(i="RELOAD"){super("reload",{detail:{type:i}})}},l=class t extends HTMLElement{constructor(){super();this.mfeReady=!1;this.mfeName="";this.mfeUrlResource="";this.mfeListeningEventName="";this.mfeTriggerEventName="";this.readyEventSuffix="-fragment-ready";this.mfeStylingUrl="";this.mfeSharedStylingUrl="";this.isMfeStreamingData="";this.abortController=null;this.bindReload=this.reloadFragment.bind(this);this.windowListeners=[];this.attachShadow({mode:"open"})}static{this.registry=new Map}static{this.pendingCallBacks=new Map}static{this.mfeEventBus=new EventTarget}cleanupWindowListeners(){this.windowListeners.forEach(({eventName:e,handler:n})=>{t.mfeEventBus.removeEventListener(e,n)}),this.windowListeners=[]}connectedCallback(){if(this.collectMfeAttributes(),this.mfeListeningEventName&&(console.log(this.mfeListeningEventName),t.mfeEventBus.addEventListener(this.mfeListeningEventName,this.bindReload)),!this.mfeUrlResource){console.error(`MFE -> ${this.mfeName} is missing the "mfe-url" attribute.`);return}if(!this.mfeName){console.error(`MFE -> ${this.mfeName} is missing the "mfe-name" attribute. The ready event will be dispatched with an undefined name.`);return}this.mfeTriggerEventName||console.error(`MFE -> ${this.mfeName} is missing the "mfe-trigger-event" attribute. The fragment will not be able to trigger any custom events.`),this.mfeListeningEventName||console.error(`MFE -> ${this.mfeName} is missing the "mfe-listen-event" attribute. The fragment will not reload on any event.`),this.mfeStylingUrl||console.warn(`MFE -> ${this.mfeName} is missing the "mfe-styling-url" attribute. The fragment will not fetch any custom styling.`),this.shadowRoot?.appendChild(document.createTextNode(`Loading ${this.mfeName}...`)),t.registry.set(this.mfeName,this),t.pendingCallBacks.get(this.mfeName)?.forEach(e=>this.onInit(e)),t.pendingCallBacks.delete(this.mfeName),this.loadFragment()}collectMfeAttributes(){this.mfeUrlResource=this.getAttribute("mfe-url"),this.mfeName=this.getAttribute("mfe-name"),this.mfeStylingUrl=this.getAttribute("mfe-styling-url"),this.mfeSharedStylingUrl=this.getAttribute("mfe-shared-styling-url"),this.mfeListeningEventName=this.getAttribute("mfe-listen-event"),this.mfeTriggerEventName=this.getAttribute("mfe-trigger-event"),this.isMfeStreamingData=this.getAttribute("mfe-stream-data")}onInit(e){this.mfeReady&&this.shadowRoot?e(this.createContext(this.shadowRoot)):t.mfeEventBus.addEventListener(this.mfeName+this.readyEventSuffix,()=>{this.cleanupWindowListeners(),e(this.createContext(this.shadowRoot))})}createContext(e){return{root:e,triggerMfeEvent:(n,o,s)=>this.triggerEvent(s??this.mfeTriggerEventName,n,o),listenMfeEvent:(n,o)=>{let s=o??this.mfeListeningEventName;t.mfeEventBus.addEventListener(s,n),this.windowListeners.push({eventName:s,handler:n})},reloadMfe:()=>this.reloadFragment(new h),mfeEvents:p}}static onReady(e,n){let o=t.registry.get(e);if(o)o.onInit(n);else{let s=t.pendingCallBacks.get(e)??[];s.push(n),t.pendingCallBacks.set(e,s)}}async fetchData(){if(this.abortController?.abort(),this.abortController=new AbortController,this.mfeUrlResource){let e=await fetch(this.mfeUrlResource,{signal:this.abortController.signal});if(!e.ok)throw new Error(`Failed to fetch ${this.mfeUrlResource}: ${e.status}`);return e.text()}}async fetchStreamData(){let e=new TextDecoder;if(this.shadowRoot&&this.shadowRoot.replaceChildren(),this.adoptStyleSheets(),this.mfeUrlResource){let n=await fetch(this.mfeUrlResource);if(!n.ok)throw new Error(`[micro-frontend "${this.mfeName}"] fetch failed: ${n.status}`);if(n.body)for await(let o of n.body){let s=e.decode(new Uint8Array(o),{stream:!0}),r=f(s);if(r.content.querySelector("slot")){this.shadowRoot?.append(r.content);continue}let a=r.content.querySelector("[slot]");if(a){let c=a.getAttribute("slot"),g=this.shadowRoot?.querySelector(`slot[name="${c}"]`);g?g.append(r.content):console.error(`No <slot name="${c}"> found in the wrapper, content won't be rendered correctly.`)}else this.shadowRoot?.append(r.content)}}}adoptStyleSheets(){if(!this.mfeSharedStylingUrl&&!this.mfeStylingUrl)return;let e=(s,r)=>s?d(s).catch(a=>(console.error(`Failed to load ${r}`,a),null)):Promise.resolve(null),n=e(this.mfeSharedStylingUrl,"shared stylesheet"),o=e(this.mfeStylingUrl,`stylesheet for MFE -> ${this.mfeName}`);this.mfeSharedStylingUrl&&u(document,this.mfeSharedStylingUrl).catch(s=>console.error(`Failed to adopt shared theme onto document for MFE -> ${this.mfeName}`,s)),Promise.all([n,o]).then(([s,r])=>{this.shadowRoot&&(this.shadowRoot.adoptedStyleSheets=[s,r].filter(a=>a!==null))})}buildFragment(e){this.shadowRoot&&this.shadowRoot.replaceChildren();let n=f(e);this.adoptStyleSheets(),this.shadowRoot?.append(n.content)}triggerEvent(e,n,o){let s=new CustomEvent(e,{detail:{message:n,payload:o}});t.mfeEventBus.dispatchEvent(s)}reloadFragment(e){e instanceof h&&(this.mfeReady=!1,e.detail.type==="RELOAD"&&this.loadFragment())}loadFragment(){this.isMfeStreamingData==="true"?this.fetchStreamData().then(e=>this.emitFragmentReadiness()).catch(e=>{this.shadowRoot?.appendChild(document.createTextNode(`Failed to fetch: ${this.mfeName}`)),console.error(`An error occured for MFE -> ${this.mfeName}`,e)}):this.fetchData().then(e=>{e&&(this.buildFragment(e),this.emitFragmentReadiness())}).catch(e=>{this.shadowRoot?.appendChild(document.createTextNode(`Failed to fetch: ${this.mfeName}`)),console.error(`An error occured for MFE -> ${this.mfeName}`,e)})}emitFragmentReadiness(){this.mfeReady=!0,console.info(`Dispatching ${this.mfeName}${this.readyEventSuffix} event!`),t.mfeEventBus.dispatchEvent(new Event(this.mfeName+this.readyEventSuffix))}disconnectedCallback(){this.cleanupWindowListeners(),console.log(`MFE -> ${this.mfeName} removed from page.`),this.mfeListeningEventName&&t.mfeEventBus.removeEventListener(this.mfeListeningEventName,this.bindReload),this.abortController?.abort()}adoptedCallback(){console.log(`MFE -> ${this.mfeName} moved to new page.`)}mfe(e,n){t.onReady(e,n)}};window.customElements.define("micro-frontend",l);window.mfe=(t,i)=>l.onReady(t,i);var N=l;export{N as default};
diff --git a/htmlflow-mfe-engine/src/htmlflow-mfe-engine.ts b/htmlflow-mfe-engine/src/htmlflow-mfe-engine.ts
index 800c5a11..ff469af8 100644
--- a/htmlflow-mfe-engine/src/htmlflow-mfe-engine.ts
+++ b/htmlflow-mfe-engine/src/htmlflow-mfe-engine.ts
@@ -25,7 +25,7 @@ interface MfeContext {
      * @param eventName - event name to dispatch; falls back to this fragment's configured
      *                     `mfe-trigger-event` attribute value if omitted/falsy.
      */
-    triggerMfeEvent: (message: string, payload: unknown, eventName: string, ) => void;
+    triggerMfeEvent: (message: string, payload: unknown, eventName: string) => void;
     /**
      * Registers a listener on the shared MFE event bus. The listener is tracked and
      * automatically removed the next time this fragment reloads, to avoid leaking
@@ -264,13 +264,16 @@ class Mfe extends HTMLElement {
                 if (node.content.querySelector('slot')) {
                     this.shadowRoot?.append(node.content);
                     continue;
-                }else{
-                    console.error("No <slot> elements were found in the wrapper, content wont be rendered correctly.");
                 }
                 const slotted = node.content.querySelector('[slot]');
                 if (slotted) {
                     const slotName = slotted.getAttribute('slot');
-                    this.shadowRoot?.querySelector(`slot[name="${slotName}"]`)?.append(node.content);
+                    const target = this.shadowRoot?.querySelector(`slot[name="${slotName}"]`);
+                    if (target) {
+                        target.append(node.content);
+                    } else {
+                        console.error(`No <slot name="${slotName}"> found in the wrapper, content won't be rendered correctly.`);
+                    }
                 } else {
                     this.shadowRoot?.append(node.content);
                 }