@microsoft/webui-framework 0.0.25 → 0.0.26

package/dist/element/styles.js

@@ -1,17 +1,627 @@
-const headInjected = new Set();
-export function injectModuleStyle(specifier, shadowRoot) {
-    if (shadowRoot) {
-        if (shadowRoot.adoptedStyleSheets.length > 0)
-            return;
-        import(specifier, { with: { type: 'css' } }).then((mod) => {
-            shadowRoot.adoptedStyleSheets.push(mod.default);
-        }, () => {
+import { installComponentLinkStyles } from './link-styles.js';
+const DEV = typeof __WEBUI_DEV__ === 'undefined' || __WEBUI_DEV__;
+const catalogs = new WeakMap();
+const installed = new WeakMap();
+const completedClosures = new WeakMap();
+const pending = new WeakMap();
+const ssrMarkers = new WeakMap();
+const resourceMarkers = new WeakMap();
+const moduleAdoption = new WeakMap();
+const moduleImportsInstalled = new WeakMap();
+const moduleImportsSeeded = new WeakSet();
+const defaultCssModuleLoader = (specifier) => import(specifier, { with: { type: 'css' } });
+let loadCssModule = defaultCssModuleLoader;
+export function setCssModuleLoaderForTests(loader) {
+    loadCssModule = loader ?? defaultCssModuleLoader;
+}
+function catalogFor(document) {
+    let catalog = catalogs.get(document);
+    if (!catalog) {
+        catalog = {
+            resources: new Map(),
+            closures: new Map(),
+        };
+        catalogs.set(document, catalog);
+    }
+    return catalog;
+}
+function isDocument(target) {
+    return target.nodeType === 9;
+}
+function owningDocument(target) {
+    return isDocument(target) ? target : target.ownerDocument;
+}
+function isObject(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+function styleGlobal(owner) {
+    const configured = owner.defaultView?.__webui;
+    if (configured || owner !== globalThis.document || typeof window === 'undefined') {
+        return configured;
+    }
+    return window.__webui;
+}
+function readNonce(target = document) {
+    const owner = owningDocument(target);
+    const nonce = styleGlobal(owner)?.nonce;
+    if (nonce)
+        return nonce;
+    const meta = owner.querySelector('meta[name="webui-nonce"]');
+    return meta?.content ?? '';
+}
+export function sameComponentStyleResource(current, next) {
+    if (current === next)
+        return true;
+    const currentMembers = current.members;
+    const nextMembers = next.members;
+    if (currentMembers?.length !== nextMembers?.length ||
+        currentMembers?.some((member, index) => member !== nextMembers?.[index])) {
+        return false;
+    }
+    switch (current.kind) {
+        case 'link':
+            return next.kind === 'link' && current.href === next.href;
+        case 'style':
+            return next.kind === 'style' && current.css === next.css;
+        case 'module':
+            return next.kind === 'module' &&
+                current.specifier === next.specifier &&
+                current.css === next.css;
+    }
+}
+export function sameComponentStyleClosure(current, next) {
+    return current === next ||
+        (current.length === next.length && current.every((id, index) => id === next[index]));
+}
+export function prepareComponentStyles(value) {
+    if (value === undefined)
+        return undefined;
+    if (!isObject(value) || value.version !== 1) {
+        throw new Error('[WebUI] componentStyles must use version 1.');
+    }
+    if (value.strategy !== 'link' && value.strategy !== 'style' && value.strategy !== 'module') {
+        throw new Error('[WebUI] componentStyles strategy must be "link", "style", or "module".');
+    }
+    if (!isObject(value.resources) || !isObject(value.closures)) {
+        throw new Error('[WebUI] componentStyles resources and closures must be objects.');
+    }
+    const strategy = value.strategy;
+    const resources = {};
+    for (const id of Object.keys(value.resources)) {
+        const resource = value.resources[id];
+        if (!id || !isObject(resource) || resource.kind !== strategy) {
+            throw new Error(`[WebUI] Invalid component style resource "${id}".`);
+        }
+        let members;
+        if (resource.members !== undefined) {
+            if (!Array.isArray(resource.members) ||
+                resource.members.length < 2 ||
+                resource.members.some(member => typeof member !== 'string' || !member) ||
+                new Set(resource.members).size !== resource.members.length) {
+                throw new Error(`[WebUI] Invalid component style resource members "${id}".`);
+            }
+            members = [...resource.members];
+        }
+        if (resource.kind === 'link' && typeof resource.href === 'string' && resource.href) {
+            resources[id] = members
+                ? { kind: 'link', href: resource.href, members }
+                : { kind: 'link', href: resource.href };
+        }
+        else if (resource.kind === 'style' && typeof resource.css === 'string') {
+            resources[id] = members
+                ? { kind: 'style', css: resource.css, members }
+                : { kind: 'style', css: resource.css };
+        }
+        else if (resource.kind === 'module' &&
+            typeof resource.specifier === 'string' && resource.specifier &&
+            typeof resource.css === 'string') {
+            resources[id] = members
+                ? { kind: 'module', specifier: resource.specifier, css: resource.css, members }
+                : { kind: 'module', specifier: resource.specifier, css: resource.css };
+        }
+        else {
+            throw new Error(`[WebUI] Invalid component style resource "${id}".`);
+        }
+    }
+    const closures = {};
+    for (const root of Object.keys(value.closures)) {
+        const closure = value.closures[root];
+        if (!root || !Array.isArray(closure)) {
+            throw new Error(`[WebUI] Invalid component style closure "${root}".`);
+        }
+        closures[root] = closure.map((id) => {
+            if (typeof id !== 'string' || !id) {
+                throw new Error(`[WebUI] Invalid resource ID in component style closure "${root}".`);
+            }
+            return id;
         });
     }
-    else if (!headInjected.has(specifier)) {
-        headInjected.add(specifier);
-        import(specifier, { with: { type: 'css' } }).then((mod) => {
-            document.adoptedStyleSheets.push(mod.default);
-        }, () => { });
+    return { version: 1, strategy, resources, closures };
+}
+export function requireComponentStyles(value) {
+    const styles = prepareComponentStyles(value);
+    if (!styles) {
+        throw new Error('[WebUI] componentStyles is required.');
+    }
+    return styles;
+}
+export function validateComponentStylesRegistration(styles, document = globalThis.document) {
+    if (!styles)
+        return;
+    const catalog = catalogFor(document);
+    for (const id of Object.keys(styles.resources)) {
+        const current = catalog.resources.get(id);
+        if (current && !sameComponentStyleResource(current, styles.resources[id])) {
+            throw new Error(`[WebUI] Conflicting component style resource "${id}".`);
+        }
+    }
+    for (const root of Object.keys(styles.closures)) {
+        const current = catalog.closures.get(root);
+        const next = styles.closures[root];
+        if (current && !sameComponentStyleClosure(current, next)) {
+            throw new Error(`[WebUI] Conflicting component style closure "${root}".`);
+        }
+    }
+}
+export function registerPreparedComponentStyles(styles, document = globalThis.document) {
+    const catalog = catalogFor(document);
+    for (const id of Object.keys(styles.resources)) {
+        if (catalog.resources.has(id))
+            continue;
+        const resource = styles.resources[id];
+        catalog.resources.set(id, resource);
+    }
+    for (const root of Object.keys(styles.closures)) {
+        if (!catalog.closures.has(root)) {
+            catalog.closures.set(root, styles.closures[root]);
+        }
+    }
+}
+export function registerComponentStyles(value, document = globalThis.document) {
+    const styles = requireComponentStyles(value);
+    validateComponentStylesRegistration(styles, document);
+    registerPreparedComponentStyles(styles, document);
+}
+export function hasRegisteredComponentStyleResource(id, document = globalThis.document) {
+    return catalogFor(document).resources.has(id);
+}
+export function hasComponentStyleWork(rootId, document = globalThis.document) {
+    return (catalogFor(document).closures.get(rootId)?.length ?? 0) > 0;
+}
+function targetInstalledResources(target) {
+    let targetInstalled = installed.get(target);
+    if (!targetInstalled) {
+        targetInstalled = new Set();
+        installed.set(target, targetInstalled);
+    }
+    return targetInstalled;
+}
+function markResourceInstalled(targetInstalled, id, resource) {
+    targetInstalled.add(id);
+    const members = resource.members;
+    if (!members)
+        return;
+    for (let i = 0; i < members.length; i++)
+        targetInstalled.add(members[i]);
+}
+function isMatchingResourceMarker(candidate, resource) {
+    const strategy = candidate.getAttribute('data-webui-strategy');
+    if (strategy !== null && strategy !== resource.kind)
+        return false;
+    return resource.kind === 'link'
+        ? candidate.localName === 'link'
+        : candidate.localName === 'style';
+}
+export function isComponentStyleMarker(element) {
+    if (typeof element.getAttribute !== 'function')
+        return false;
+    if (element.getAttribute('data-webui-resource') === null)
+        return false;
+    const strategy = element.getAttribute('data-webui-strategy');
+    return (element.localName === 'link' && strategy === 'link') ||
+        (element.localName === 'style' && (strategy === 'style' || strategy === 'module'));
+}
+export function isComponentStyleResourceMarker(element) {
+    if (isComponentStyleMarker(element))
+        return true;
+    return element.localName === 'script' &&
+        element.getAttribute('type') === 'importmap' &&
+        element.getAttribute('data-webui-resource') !== null;
+}
+function scanSsrMarkerElements(candidates, catalog, targetInstalled, state) {
+    for (let i = 0; i < candidates.length; i++) {
+        const candidate = candidates[i];
+        const id = candidate.getAttribute('data-webui-resource');
+        if (id === null)
+            continue;
+        const resource = catalog.resources.get(id);
+        if (!resource || !isMatchingResourceMarker(candidate, resource))
+            continue;
+        if (resource.kind !== 'module') {
+            markResourceInstalled(targetInstalled, id, resource);
+            continue;
+        }
+        let moduleElements = state.moduleElements;
+        let moduleIds = state.moduleIds;
+        if (!moduleElements || !moduleIds) {
+            moduleElements = new Map();
+            moduleIds = [];
+            state.moduleElements = moduleElements;
+            state.moduleIds = moduleIds;
+        }
+        if (!moduleElements.has(id)) {
+            moduleElements.set(id, candidate);
+            moduleIds.push(id);
+        }
+    }
+}
+function ensureSsrMarkers(target, catalog, targetInstalled) {
+    let state = ssrMarkers.get(target);
+    if (state)
+        return state;
+    state = {};
+    ssrMarkers.set(target, state);
+    const candidates = target.querySelectorAll?.('link[data-webui-resource],style[data-webui-resource]');
+    if (candidates) {
+        scanSsrMarkerElements(candidates, catalog, targetInstalled, state);
+    }
+    return state;
+}
+export function claimSsrComponentStyles(source, target) {
+    const catalog = catalogFor(owningDocument(target));
+    const targetInstalled = targetInstalledResources(target);
+    const state = ensureSsrMarkers(target, catalog, targetInstalled);
+    const route = source.parentElement;
+    if (route?.localName === 'webui-route') {
+        scanSsrMarkerElements(route.children, catalog, targetInstalled, state);
+    }
+}
+function markerScope(target) {
+    return isDocument(target) ? target.head : target;
+}
+function directResourceMarkers(target, catalog) {
+    const scope = markerScope(target);
+    const cached = resourceMarkers.get(target);
+    if (cached && cached.count === scope.childElementCount) {
+        return cached.markers.size > 0 ? cached.markers : undefined;
+    }
+    const candidates = scope.children;
+    const markers = new Map();
+    for (let i = 0; i < candidates.length; i++) {
+        const id = candidates[i].getAttribute('data-webui-resource');
+        if (id === null)
+            continue;
+        const resource = catalog.resources.get(id);
+        if (!resource || !isMatchingResourceMarker(candidates[i], resource))
+            continue;
+        if (!markers.has(id))
+            markers.set(id, candidates[i]);
+    }
+    resourceMarkers.set(target, { count: candidates.length, markers });
+    return markers.size > 0 ? markers : undefined;
+}
+function noteMarkerInserted(target, id, element) {
+    const cached = resourceMarkers.get(target);
+    if (!cached)
+        return;
+    cached.count++;
+    if (!cached.markers.has(id))
+        cached.markers.set(id, element);
+}
+function appendResource(target, id, resource, before) {
+    const document = owningDocument(target);
+    const parent = isDocument(target) ? target.head : target;
+    if (resource.kind === 'link') {
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = resource.href;
+        link.setAttribute('data-webui-resource', id);
+        link.setAttribute('data-webui-strategy', 'link');
+        parent.insertBefore(link, before ?? null);
+        noteMarkerInserted(target, id, link);
+        return link;
+    }
+    if (resource.kind === 'style') {
+        const style = document.createElement('style');
+        const nonce = readNonce(target);
+        if (nonce)
+            style.nonce = nonce;
+        style.textContent = resource.css;
+        style.setAttribute('data-webui-resource', id);
+        style.setAttribute('data-webui-strategy', 'style');
+        parent.insertBefore(style, before ?? null);
+        noteMarkerInserted(target, id, style);
+        return style;
+    }
+    throw new Error(`[WebUI] Module resource "${id}" cannot be installed as an element.`);
+}
+function seededModuleSpecifiers(owner) {
+    let installedSpecifiers = moduleImportsInstalled.get(owner);
+    if (!installedSpecifiers) {
+        installedSpecifiers = new Set();
+        moduleImportsInstalled.set(owner, installedSpecifiers);
+    }
+    if (moduleImportsSeeded.has(owner))
+        return installedSpecifiers;
+    moduleImportsSeeded.add(owner);
+    const styles = styleGlobal(owner)?.styles;
+    if (!styles)
+        return installedSpecifiers;
+    for (let i = 0; i < styles.length; i++) {
+        installedSpecifiers.add(styles[i]);
+    }
+    return installedSpecifiers;
+}
+function installModuleImportMap(target, specifier, css) {
+    const owner = owningDocument(target);
+    const installedSpecifiers = seededModuleSpecifiers(owner);
+    if (installedSpecifiers.has(specifier))
+        return;
+    const script = owner.createElement('script');
+    script.type = 'importmap';
+    const nonce = readNonce(target);
+    if (nonce)
+        script.nonce = nonce;
+    script.textContent = JSON.stringify({
+        imports: { [specifier]: `data:text/css,${encodeURIComponent(css)}` },
+    });
+    owner.head.appendChild(script);
+    installedSpecifiers.add(specifier);
+}
+function loadModule(target, id, resource) {
+    let targetPending = pending.get(target);
+    if (!targetPending) {
+        targetPending = new Map();
+        pending.set(target, targetPending);
+    }
+    const existing = targetPending.get(id);
+    if (existing)
+        return existing;
+    installModuleImportMap(target, resource.specifier, resource.css);
+    const loads = targetPending;
+    const promise = loadCssModule(resource.specifier)
+        .then((module) => module.default);
+    loads.set(id, promise);
+    void promise.catch(() => {
+        if (loads.get(id) === promise)
+            loads.delete(id);
+    });
+    return promise;
+}
+function markClosureComplete(target, rootId) {
+    let roots = completedClosures.get(target);
+    if (!roots) {
+        roots = new Set();
+        completedClosures.set(target, roots);
+    }
+    roots.add(rootId);
+}
+function installElementRange(target, catalog, closure, targetInstalled, start, end, before, linkElements) {
+    for (let i = start; i < end; i++) {
+        const id = closure[i];
+        if (targetInstalled.has(id))
+            continue;
+        const resource = catalog.resources.get(id);
+        if (!resource || resource.kind === 'module')
+            continue;
+        const element = appendResource(target, id, resource, before);
+        if (linkElements && resource.kind === 'link') {
+            linkElements.push(element);
+        }
+        markResourceInstalled(targetInstalled, id, resource);
+    }
+}
+function warnOnContradictoryOrder(rootId, closure, markers) {
+    let previousId;
+    let previous;
+    for (let i = 0; i < closure.length; i++) {
+        const marker = markers.get(closure[i]);
+        if (!marker)
+            continue;
+        if (previous &&
+            typeof previous.compareDocumentPosition === 'function' &&
+            (previous.compareDocumentPosition(marker) & 4) === 0) {
+            console.warn(`[WebUI] Closure "${rootId}" wants "${previousId}" before "${closure[i]}", but they are already installed in the opposite order. The first closure to install decides, so these rules cascade against this closure's intent.`);
+            return;
+        }
+        previousId = closure[i];
+        previous = marker;
+    }
+}
+function installElements(target, catalog, closure, targetInstalled, markers, rootId, linkElements) {
+    let segmentEnd = closure.length;
+    let before;
+    if (markers) {
+        if (DEV)
+            warnOnContradictoryOrder(rootId, closure, markers);
+        for (let i = closure.length - 1; i >= 0; i--) {
+            const marker = markers.get(closure[i]);
+            if (!marker)
+                continue;
+            installElementRange(target, catalog, closure, targetInstalled, i + 1, segmentEnd, before, linkElements);
+            const resource = catalog.resources.get(closure[i]);
+            if (resource && resource.kind !== 'module') {
+                markResourceInstalled(targetInstalled, closure[i], resource);
+            }
+            before = marker;
+            segmentEnd = i;
+        }
+    }
+    installElementRange(target, catalog, closure, targetInstalled, 0, segmentEnd, before, linkElements);
+}
+function moduleAdoptionState(target) {
+    let state = moduleAdoption.get(target);
+    if (!state) {
+        state = { order: [], reserved: new Set(), sheets: new Map() };
+        moduleAdoption.set(target, state);
+    }
+    return state;
+}
+function reserveModuleSlot(target, id) {
+    const state = moduleAdoptionState(target);
+    if (state.reserved.has(id))
+        return;
+    state.reserved.add(id);
+    state.order.push(id);
+}
+function applyModuleOrder(target, state) {
+    const adopted = target.adoptedStyleSheets;
+    const owned = new Set(state.sheets.values());
+    const next = [];
+    for (let i = 0; i < adopted.length; i++) {
+        if (!owned.has(adopted[i]))
+            next.push(adopted[i]);
+    }
+    const seen = new Set();
+    for (let i = 0; i < state.order.length; i++) {
+        const sheet = state.sheets.get(state.order[i]);
+        if (!sheet || seen.has(sheet))
+            continue;
+        seen.add(sheet);
+        next.push(sheet);
+    }
+    if (next.length === adopted.length) {
+        let same = true;
+        for (let i = 0; i < next.length; i++) {
+            if (next[i] !== adopted[i]) {
+                same = false;
+                break;
+            }
+        }
+        if (same)
+            return;
+    }
+    target.adoptedStyleSheets = next;
+}
+function commitModules(target, ids, sheets, markers, targetInstalled) {
+    const state = moduleAdoptionState(target);
+    const catalog = catalogFor(owningDocument(target));
+    for (let i = 0; i < sheets.length; i++) {
+        const id = ids[i];
+        if (!state.reserved.has(id)) {
+            state.reserved.add(id);
+            state.order.push(id);
+        }
+        state.sheets.set(id, sheets[i]);
+    }
+    applyModuleOrder(target, state);
+    const targetPending = pending.get(target);
+    for (let i = 0; i < sheets.length; i++) {
+        const id = ids[i];
+        const resource = catalog.resources.get(id);
+        if (resource)
+            markResourceInstalled(targetInstalled, id, resource);
+        else
+            targetInstalled.add(id);
+        targetPending?.delete(id);
+        const marker = markers?.get(id);
+        if (marker) {
+            marker.remove();
+            markers?.delete(id);
+        }
+    }
+    if (targetPending?.size === 0)
+        pending.delete(target);
+}
+async function finishModuleLoads(target, rootId, ids, loads, markers, targetInstalled) {
+    const sheets = [];
+    try {
+        for (let i = 0; i < loads.length; i++) {
+            sheets.push(await loads[i]);
+        }
+    }
+    catch (error) {
+        if (sheets.length > 0) {
+            commitModules(target, ids, sheets, markers, targetInstalled);
+        }
+        throw error;
+    }
+    commitModules(target, ids, sheets, markers, targetInstalled);
+    markClosureComplete(target, rootId);
+}
+export function installComponentStyles(rootId, target, host) {
+    const catalog = catalogFor(owningDocument(target));
+    const closure = catalog.closures.get(rootId);
+    if (!closure || completedClosures.get(target)?.has(rootId))
+        return undefined;
+    const targetInstalled = targetInstalledResources(target);
+    const markerState = ensureSsrMarkers(target, catalog, targetInstalled);
+    let hasElementWork = false;
+    let hasClosureModuleWork = false;
+    for (let i = 0; i < closure.length; i++) {
+        const id = closure[i];
+        if (targetInstalled.has(id))
+            continue;
+        const resource = catalog.resources.get(id);
+        if (!resource) {
+            throw new Error(`[WebUI] Missing component style resource "${id}" for closure "${rootId}".`);
+        }
+        if (resource.kind === 'module')
+            hasClosureModuleWork = true;
+        else
+            hasElementWork = true;
+    }
+    let hasSsrModuleWork = false;
+    const ssrModuleIds = markerState.moduleIds;
+    if (ssrModuleIds) {
+        for (let i = 0; i < ssrModuleIds.length; i++) {
+            if (!targetInstalled.has(ssrModuleIds[i])) {
+                hasSsrModuleWork = true;
+                break;
+            }
+        }
+    }
+    if (!hasElementWork && !hasClosureModuleWork && !hasSsrModuleWork) {
+        markClosureComplete(target, rootId);
+        return undefined;
+    }
+    if (hasElementWork) {
+        const linkElements = [];
+        installElements(target, catalog, closure, targetInstalled, directResourceMarkers(target, catalog), rootId, linkElements);
+        if (host && !isDocument(target)) {
+            installComponentLinkStyles(host, target, linkElements);
+        }
+    }
+    let moduleIds;
+    let moduleLoads;
+    let queuedModules;
+    const queueModule = (id, resource) => {
+        if (!moduleIds || !moduleLoads || !queuedModules) {
+            moduleIds = [];
+            moduleLoads = [];
+            queuedModules = new Set();
+        }
+        reserveModuleSlot(target, id);
+        moduleIds.push(id);
+        moduleLoads.push(loadModule(target, id, resource));
+        queuedModules.add(id);
+    };
+    if (ssrModuleIds) {
+        for (let i = 0; i < ssrModuleIds.length; i++) {
+            const id = ssrModuleIds[i];
+            if (targetInstalled.has(id))
+                continue;
+            const resource = catalog.resources.get(id);
+            if (!resource || resource.kind !== 'module')
+                continue;
+            queueModule(id, resource);
+        }
+    }
+    for (let i = 0; i < closure.length; i++) {
+        const id = closure[i];
+        if (targetInstalled.has(id) || queuedModules?.has(id))
+            continue;
+        const resource = catalog.resources.get(id);
+        if (!resource) {
+            throw new Error(`[WebUI] Missing component style resource "${id}" for closure "${rootId}".`);
+        }
+        if (resource.kind === 'module') {
+            queueModule(id, resource);
+        }
+    }
+    if (!moduleLoads || !moduleIds) {
+        markClosureComplete(target, rootId);
+        return undefined;
     }
+    return finishModuleLoads(target, rootId, moduleIds, moduleLoads, markerState.moduleElements, targetInstalled);
 }

package/dist/element/types.d.ts

@@ -1,11 +1,13 @@
 import type { CompiledAttrPart, CompiledCondition } from '../template.js';
 export interface TextBinding {
-    node: Text;
+    node: CharacterData;
     path?: string;
     parts?: CompiledAttrPart[];
     scope?: ScopeFrame;
     raw?: boolean;
-    rawParent?: Element;
+    rawEnd?: Comment;
+    rawValue?: string;
+    rawOwner?: TemplateInstance;
 }
 export declare const ATTR_KIND_ATTRIBUTE = 0;
 export declare const ATTR_KIND_COMPLEX = 1;
@@ -41,7 +43,7 @@ export interface TemplateInstance {
 export interface CondBinding {
     condition: CompiledCondition;
     blockIndex: number;
-    anchor: Comment;
+    anchor: Comment | null;
     scope?: ScopeFrame;
     owner: TemplateInstance;
     instance: TemplateInstance | null;

package/dist/element.js

@@ -5,6 +5,8 @@ import { attributeNameForProperty, getObservableNames, syncAttrProperties, } fro
 const HYDRATE_ATTR = 'w-hydrate';
 const RENDER_ATTR = 'w-render';
 const HYDRATE_EAGER = 'eager';
+const INTERACTION_HYDRATION = 3;
+const LAZY_RENDER_INTERACTION = 4;
 const DEV = typeof __WEBUI_DEV__ === 'undefined' || __WEBUI_DEV__;
 let warnedMissingLazyHydrationEntry = false;
 function warnMissingLazyHydrationEntry(tag, policy) {
@@ -63,6 +65,12 @@ export class WebUIElement extends TemplateElement {
         const policy = meta?.wp;
         if (policy === undefined)
             return undefined;
+        if (policy === INTERACTION_HYDRATION
+            || policy === LAZY_RENDER_INTERACTION)
+            return undefined;
+        if (policy !== LAZY_HYDRATION_VIEWPORT
+            && policy !== LAZY_HYDRATION_CONTENT_VISIBILITY)
+            return undefined;
         if (policy === LAZY_HYDRATION_CONTENT_VISIBILITY &&
             this.getAttribute(RENDER_ATTR) === HYDRATE_EAGER)
             return undefined;
@@ -101,7 +109,7 @@ export class WebUIElement extends TemplateElement {
         return this.dispatchEvent(new CustomEvent(name, {
             bubbles: true,
             cancelable: true,
-            composed: !!this.shadowRoot,
+            composed: true,
             detail,
         }));
     }