@webview-native-ui/engine 0.0.0-stage → 0.0.1

package/dist/overlays.js

@@ -0,0 +1,181 @@
+/** Whether a Web overlay covers the underlying surface, independently of its renderer. */
+export const usesOverlayBackdrop = (element, breakpoint) => {
+    if (element.matches('ion-toast, ion-menu'))
+        return false;
+    const overlay = element;
+    if (overlay.showBackdrop === false)
+        return false;
+    if (!element.matches('ion-modal'))
+        return true;
+    const height = breakpoint ?? overlay.initialBreakpoint;
+    return height === undefined || height > (overlay.backdropBreakpoint ?? 0);
+};
+const key = Symbol.for('@webview-native-ui/engine/overlays/v1');
+const createCoordinator = (doc) => {
+    const active = new Set();
+    const native = new Set();
+    const listeners = new Set();
+    const breakpoints = new WeakMap();
+    const dismissed = new WeakSet();
+    const registrations = new Map();
+    let definitions = [];
+    let options = {};
+    let routes = new Map();
+    let observer;
+    const notify = (change) => {
+        for (const listener of [...listeners]) {
+            try {
+                listener(change);
+            }
+            catch (error) {
+                console.error('Native UI overlay listener failed', error);
+            }
+        }
+    };
+    const accept = (element, phase, event) => {
+        if (phase === 'willPresent' || phase === 'didPresent') {
+            dismissed.delete(element);
+            active.add(element);
+        }
+        else if (phase === 'didDismiss') {
+            dismissed.add(element);
+            active.delete(element);
+            native.delete(element);
+            breakpoints.delete(element);
+        }
+        const breakpoint = event?.detail?.breakpoint;
+        // Zero begins sheet dismissal; retain coverage until DidDismiss retires the surface.
+        if (typeof breakpoint === 'number' && breakpoint > 0)
+            breakpoints.set(element, breakpoint);
+        notify({ element, phase, event });
+    };
+    const refresh = (initial = false) => {
+        let changed = false;
+        for (const element of active)
+            if (!element.isConnected || element.ownerDocument !== doc || !definitions.some(({ selector }) => element.matches(selector))) {
+                active.delete(element);
+                native.delete(element);
+                changed = true;
+            }
+        for (const element of doc.querySelectorAll(definitions.map(({ selector }) => selector).join(','))) {
+            if (!active.has(element) &&
+                !dismissed.has(element) &&
+                (initial || !element.matches('ion-popover')) &&
+                (element.presented || element.classList.contains('show-menu'))) {
+                active.add(element);
+                changed = true;
+            }
+        }
+        if (changed)
+            notify({ phase: 'change' });
+    };
+    return {
+        get active() {
+            return active;
+        },
+        subscribe(listener) {
+            listeners.add(listener);
+            return () => {
+                listeners.delete(listener);
+            };
+        },
+        /** Renderer ownership is explicit because a child native window is outside the DOM stack. */
+        setNative(element, value) {
+            if (native.has(element) === value)
+                return;
+            if (value)
+                native.add(element);
+            else
+                native.delete(element);
+            notify({ element, phase: 'change' });
+        },
+        isExcluded(element) {
+            return !!options.exclude && element.matches(options.exclude);
+        },
+        isNative(element) {
+            return native.has(element);
+        },
+        get stack() {
+            const stack = [...active].filter((element) => element.isConnected && element.ownerDocument === doc);
+            const order = (element) => {
+                const z = Number.parseFloat(doc.defaultView.getComputedStyle(element).zIndex);
+                return Number.isFinite(z) ? z : (element.overlayIndex ?? 0);
+            };
+            stack.sort((a, b) => order(a) - order(b));
+            return stack;
+        },
+        isCovered(target) {
+            const stack = this.stack;
+            const owner = stack.reduce((last, element, index) => (element.contains(target) ? index : last), -1);
+            return stack.some((element, index) => {
+                if (native.has(element) || (options.exclude && element.matches(options.exclude)))
+                    return false;
+                const override = options.covers?.(element, target);
+                if (override !== undefined)
+                    return override;
+                return (index > owner &&
+                    !element.contains(target) &&
+                    (element.matches('ion-menu') || usesOverlayBackdrop(element, breakpoints.get(element))));
+            });
+        },
+        enable(defaults, config) {
+            const nextOptions = { ...options, ...config };
+            const nextDefinitions = [...defaults, ...(nextOptions.additional ?? [])];
+            if (nextOptions.exclude)
+                doc.querySelector(nextOptions.exclude);
+            const nextRoutes = new Map();
+            for (const definition of nextDefinitions) {
+                doc.querySelector(definition.selector);
+                for (const [phase, name] of Object.entries(definition.events)) {
+                    const existing = nextRoutes.get(name);
+                    if (existing && existing.phase !== phase)
+                        throw new TypeError(`Overlay event "${name}" has conflicting phases`);
+                    nextRoutes.set(name, {
+                        phase: phase,
+                        selector: existing ? `${existing.selector}, ${definition.selector}` : definition.selector,
+                    });
+                }
+            }
+            options = nextOptions;
+            definitions = nextDefinitions;
+            routes = nextRoutes;
+            for (const name of routes.keys()) {
+                if (registrations.has(name))
+                    continue;
+                const listener = (event) => {
+                    const route = routes.get(name);
+                    const element = event
+                        .composedPath()
+                        .find((node) => node instanceof doc.defaultView.HTMLElement && node.matches(route.selector));
+                    if (element)
+                        accept(element, route.phase, event);
+                };
+                doc.addEventListener(name, listener, true);
+                registrations.set(name, () => doc.removeEventListener(name, listener, true));
+            }
+            for (const [name, remove] of registrations)
+                if (!routes.has(name)) {
+                    remove();
+                    registrations.delete(name);
+                }
+            const initial = !observer;
+            if (!observer) {
+                observer = new MutationObserver(() => refresh());
+                observer.observe(doc.documentElement, { childList: true, subtree: true });
+                doc.addEventListener('nativeUIOverlayAdopted', (event) => {
+                    const element = event.detail;
+                    if (element?.ownerDocument === doc)
+                        accept(element, 'willPresent', event);
+                });
+            }
+            refresh(initial);
+            if (initial || config)
+                notify({ phase: 'change' });
+        },
+    };
+};
+/** Access is inert: only the explicit framework initializer installs DOM listeners. */
+export const getOverlayCoordinator = (doc) => {
+    const shared = doc;
+    return (shared[key] ??= createCoordinator(doc));
+};

package/dist/projection-events.d.ts

@@ -0,0 +1,12 @@
+import type { ListenerHandle } from './types.js';
+export type ProjectionDestination = 'native' | 'web' | 'none';
+/** Notifications from the existing plugin proxy; public plugin methods are never intercepted. */
+export interface ProjectionEvents {
+    addListener(name: string, listener: (event: unknown) => void): Promise<ListenerHandle>;
+    update?: readonly string[];
+    projection?: Partial<Record<ProjectionDestination, readonly string[]>>;
+    /** Required when the plugin emits events for multiple independent surfaces. */
+    accepts?(event: unknown): boolean;
+}
+/** Subscribe once per event, including events that both update and change destination. */
+export declare const bindProjectionEvents: (events: ProjectionEvents, receive: (destination: ProjectionDestination | undefined, updated: boolean) => void) => Promise<ListenerHandle>;

package/dist/projection-events.js

@@ -0,0 +1,44 @@
+import { boundedListener } from './bridge.js';
+/** Subscribe once per event, including events that both update and change destination. */
+export const bindProjectionEvents = async (events, receive) => {
+    const routes = new Map();
+    for (const name of events.update ?? [])
+        routes.set(name, { updated: true });
+    for (const destination of ['native', 'web', 'none']) {
+        for (const name of events.projection?.[destination] ?? []) {
+            const route = routes.get(name) ?? { updated: false };
+            if (route.destination && route.destination !== destination)
+                throw new TypeError(`Projection event "${name}" has conflicting destinations`);
+            routes.set(name, { ...route, destination });
+        }
+    }
+    let stopped = false;
+    const handles = [];
+    const remove = async () => {
+        stopped = true;
+        const results = await Promise.allSettled(handles.splice(0).map((handle) => Promise.resolve().then(() => handle.remove())));
+        const failure = results.find((result) => result.status === 'rejected');
+        if (failure?.status === 'rejected')
+            throw failure.reason;
+    };
+    // Start all registrations immediately, so one slow bridge reply does not delay other subscriptions.
+    const registrations = [...routes].map(async ([name, route]) => {
+        const handle = await boundedListener(Promise.resolve().then(() => events.addListener(name, (event) => {
+            if (!stopped && (!events.accepts || events.accepts(event)))
+                receive(route.destination, route.updated);
+        })));
+        if (stopped)
+            await handle.remove();
+        else
+            handles.push(handle);
+    });
+    try {
+        await Promise.all(registrations);
+        return { remove };
+    }
+    catch (error) {
+        // Disable callbacks immediately. Late successful registrations also remove themselves.
+        await remove().catch(() => { });
+        throw error;
+    }
+};

package/dist/projection-placement.d.ts

@@ -0,0 +1,14 @@
+/** Placement supplied synchronously before a native view returns from a Web image. */
+export interface ProjectionPlacementBinding {
+    readonly projected: boolean;
+    dispose(): void;
+}
+interface PlacementState {
+    projected: boolean;
+    owner?: object;
+    invalidate(): void;
+    measure(): Record<string, unknown>;
+}
+export declare const bindProjectionPlacement: (element: HTMLElement, measure: () => Record<string, unknown>, invalidate?: () => void) => ProjectionPlacementBinding;
+export declare const projectionPlacement: (element: HTMLElement | undefined) => PlacementState | undefined;
+export {};

package/dist/projection-placement.js

@@ -0,0 +1,18 @@
+// The injected runtime and a plugin's bundled helper share the binding.
+const placementKey = Symbol.for('webview-native-ui-engine.projection-placement');
+export const bindProjectionPlacement = (element, measure, invalidate = () => { }) => {
+    const host = element;
+    const state = { projected: false, measure, invalidate };
+    host[placementKey] = state;
+    return {
+        get projected() {
+            return host[placementKey] === state && state.projected;
+        },
+        dispose() {
+            if (host[placementKey] === state)
+                delete host[placementKey];
+            state.projected = false;
+        },
+    };
+};
+export const projectionPlacement = (element) => element?.[placementKey];

package/dist/runtime.d.ts

@@ -0,0 +1,2 @@
+/** Use the host's existing file server; never initialize a framework bridge. */
+export declare const projectionURL: (url: string) => string;

package/dist/runtime.js

@@ -0,0 +1,11 @@
+/** Use the host's existing file server; never initialize a framework bridge. */
+export const projectionURL = (url) => {
+    const host = globalThis;
+    if (host.Capacitor?.convertFileSrc)
+        return host.Capacitor.convertFileSrc(url);
+    if (!url.startsWith('file:'))
+        return url;
+    if (host.WkWebView?.convertFilePath)
+        return host.WkWebView.convertFilePath(url);
+    throw new Error('Native UI file URL requires a host resource handler');
+};

package/dist/scroll-bindings.d.ts

@@ -0,0 +1,11 @@
+import type { WebProjectionSource } from './types.js';
+/** Coordinate ownership, independent of any plugin's update transport or rendering. */
+export declare const createScrollBindings: () => {
+    reuse: (candidate: WebProjectionSource, width: number) => boolean;
+    acknowledge(sources: WebProjectionSource[], width: number): void;
+    changed(owner: HTMLElement): void;
+    settled(owner: HTMLElement): void;
+    eligible(candidate: WebProjectionSource, width: number): boolean;
+    acquiring(sources: WebProjectionSource[], width: number): Map<HTMLElement, number>;
+    unconfirmed(sources: WebProjectionSource[], acquiring: Map<HTMLElement, number>): Set<HTMLElement>;
+};

package/dist/scroll-bindings.js

@@ -0,0 +1,55 @@
+/** Coordinate ownership, independent of any plugin's update transport or rendering. */
+export const createScrollBindings = () => {
+    let acknowledged = [];
+    let viewportWidth = 0;
+    const motion = new WeakMap();
+    const reuse = (candidate, width) => {
+        const next = candidate.control.scroll;
+        if (!candidate.scrollElement || !next || viewportWidth !== width)
+            return false;
+        return acknowledged.some((previous) => {
+            const current = previous.control.scroll;
+            return (previous.scrollElement === candidate.scrollElement &&
+                current?.id === next.id &&
+                current.contentWidth === next.contentWidth &&
+                current.contentHeight === next.contentHeight &&
+                ['viewport', 'clip'].every((key) => ['x', 'y', 'width', 'height'].every((axis) => current[key][axis] === next[key][axis])));
+        });
+    };
+    return {
+        reuse,
+        acknowledge(sources, width) {
+            acknowledged = sources;
+            viewportWidth = width;
+        },
+        changed(owner) {
+            motion.set(owner, { version: (motion.get(owner)?.version ?? 0) + 1, moving: true });
+        },
+        settled(owner) {
+            const state = motion.get(owner);
+            if (state)
+                state.moving = false;
+        },
+        eligible(candidate, width) {
+            return !candidate.scrollElement || !motion.get(candidate.scrollElement)?.moving || reuse(candidate, width);
+        },
+        acquiring(sources, width) {
+            return new Map(sources.flatMap((source) => source.scrollElement && !reuse(source, width)
+                ? [[source.scrollElement, motion.get(source.scrollElement)?.version ?? 0]]
+                : []));
+        },
+        unconfirmed(sources, acquiring) {
+            return new Set(sources.flatMap((source) => {
+                const owner = source.scrollElement, sample = source.control.scroll;
+                return owner &&
+                    sample &&
+                    acquiring.has(owner) &&
+                    (acquiring.get(owner) !== (motion.get(owner)?.version ?? 0) ||
+                        owner.scrollLeft !== sample.offsetX ||
+                        owner.scrollTop !== sample.offsetY)
+                    ? [owner]
+                    : [];
+            }));
+        },
+    };
+};

package/dist/scroll-placement.d.ts

@@ -0,0 +1,5 @@
+import type { ScrollPlacement as NativeUIScrollPlacement } from './types.js';
+type Identify = (element: HTMLElement) => string;
+/** Layout-only measurement. Native owns subsequent scroll offsets. No private Ionic APIs. */
+export declare const readScrollPlacement: (element: HTMLElement, owner: HTMLElement, id: Identify) => NativeUIScrollPlacement | undefined;
+export {};

package/dist/scroll-placement.js

@@ -0,0 +1,85 @@
+import { projectionAncestors } from './geometry.js';
+const frame = ({ x, y, width, height }) => ({ x, y, width, height });
+const viewportFrame = (element) => {
+    const bounds = element.getBoundingClientRect();
+    const style = getComputedStyle(element);
+    const left = parseFloat(style.borderLeftWidth) || 0;
+    const top = parseFloat(style.borderTopWidth) || 0;
+    return {
+        x: bounds.left + left,
+        y: bounds.top + top,
+        width: bounds.width - left - (parseFloat(style.borderRightWidth) || 0),
+        height: bounds.height - top - (parseFloat(style.borderBottomWidth) || 0),
+    };
+};
+/** Layout-only measurement. Native owns subsequent scroll offsets. No private Ionic APIs. */
+export const readScrollPlacement = (element, owner, id) => {
+    const ancestors = [element, ...projectionAncestors(element)];
+    const index = ancestors.indexOf(owner);
+    if (index <= 0 || owner === element.ownerDocument.scrollingElement)
+        return;
+    const win = element.ownerDocument.defaultView;
+    if (win.visualViewport && (win.visualViewport.scale !== 1 || win.visualViewport.offsetLeft || win.visualViewport.offsetTop))
+        return;
+    let left = 0, top = 0, right = win.innerWidth, bottom = win.innerHeight;
+    for (const [i, ancestor] of ancestors.entries()) {
+        const style = getComputedStyle(ancestor);
+        if ((style.transform !== 'none' && !new DOMMatrixReadOnly(style.transform).isIdentity) ||
+            (style.zoom && style.zoom !== 'normal' && Number(style.zoom) !== 1) ||
+            [style.translate, style.rotate, style.scale, style.perspective].some((value) => value && value !== 'none') ||
+            (style.writingMode && style.writingMode !== 'horizontal-tb') ||
+            (i < index && /^(fixed|sticky)$/.test(style.position)))
+            return;
+        if (i === 0)
+            continue;
+        if (style.scrollbarGutter && style.scrollbarGutter !== 'auto')
+            return;
+        const clipsX = /^(auto|scroll|hidden|clip)$/.test(style.overflowX);
+        const clipsY = /^(auto|scroll|hidden|clip)$/.test(style.overflowY);
+        // Nested moving/clipping coordinates require a separate binding; do not guess.
+        if (i < index && (clipsX || clipsY))
+            return;
+        const documentScroll = ancestor === element.ownerDocument.scrollingElement;
+        if (i > index &&
+            (((clipsX || documentScroll) && ancestor.scrollWidth > ancestor.clientWidth) ||
+                ((clipsY || documentScroll) && ancestor.scrollHeight > ancestor.clientHeight)))
+            return;
+        if ((clipsX || clipsY) &&
+            [style.borderTopLeftRadius, style.borderTopRightRadius, style.borderBottomLeftRadius, style.borderBottomRightRadius].some((radius) => parseFloat(radius) > 0))
+            return;
+        if ((style.clipPath && style.clipPath !== 'none') || (style.maskImage && style.maskImage !== 'none'))
+            return;
+        if (i >= index) {
+            const rect = viewportFrame(ancestor);
+            if (clipsX) {
+                left = Math.max(left, rect.x);
+                right = Math.min(right, rect.x + rect.width);
+            }
+            if (clipsY) {
+                top = Math.max(top, rect.y);
+                bottom = Math.min(bottom, rect.y + rect.height);
+            }
+        }
+    }
+    const style = getComputedStyle(owner);
+    if (!/^(auto|scroll)$/.test(style.overflowX) && !/^(auto|scroll)$/.test(style.overflowY))
+        return;
+    const viewport = viewportFrame(owner);
+    if (right <= left || bottom <= top || !viewport.width || !viewport.height)
+        return;
+    const source = frame(element.getBoundingClientRect());
+    return {
+        id: id(owner),
+        offsetX: owner.scrollLeft,
+        offsetY: owner.scrollTop,
+        viewport,
+        clip: { x: left, y: top, width: right - left, height: bottom - top },
+        contentWidth: owner.scrollWidth,
+        contentHeight: owner.scrollHeight,
+        frame: {
+            ...source,
+            x: source.x - viewport.x + owner.scrollLeft,
+            y: source.y - viewport.y + owner.scrollTop,
+        },
+    };
+};

package/dist/snapshot-styles.d.ts

@@ -0,0 +1,2 @@
+/** Image presentation only; Native/Web ownership styling stays with the renderer. */
+export declare const snapshotStyles = "\n:is([data-native-ui-snapshot-source], [data-native-ui-snapshot-prepared]),\n:is([data-native-ui-snapshot-source], [data-native-ui-snapshot-prepared]) *,\n:is([data-native-ui-snapshot-source], [data-native-ui-snapshot-prepared])::after,\n:is([data-native-ui-snapshot-source], [data-native-ui-snapshot-prepared])::part(native) { visibility: hidden !important; }\n[data-native-ui-snapshot][data-native-ui-snapshot]::before {\n all:initial!important;content:\"\"!important;display:block!important;position:absolute!important;\n visibility:visible!important;opacity:0!important;will-change:opacity!important;\n pointer-events:none!important;image-rendering:pixelated!important;\n}\n[data-native-ui-snapshot-visible] { opacity:1!important;overflow:visible!important; }\n[data-native-ui-snapshot-visible][data-native-ui-snapshot][data-native-ui-snapshot]::before { opacity:1!important; }\n";

package/dist/snapshot-styles.js

@@ -0,0 +1,14 @@
+/** Image presentation only; Native/Web ownership styling stays with the renderer. */
+export const snapshotStyles = `
+:is([data-native-ui-snapshot-source], [data-native-ui-snapshot-prepared]),
+:is([data-native-ui-snapshot-source], [data-native-ui-snapshot-prepared]) *,
+:is([data-native-ui-snapshot-source], [data-native-ui-snapshot-prepared])::after,
+:is([data-native-ui-snapshot-source], [data-native-ui-snapshot-prepared])::part(native) { visibility: hidden !important; }
+[data-native-ui-snapshot][data-native-ui-snapshot]::before {
+ all:initial!important;content:""!important;display:block!important;position:absolute!important;
+ visibility:visible!important;opacity:0!important;will-change:opacity!important;
+ pointer-events:none!important;image-rendering:pixelated!important;
+}
+[data-native-ui-snapshot-visible] { opacity:1!important;overflow:visible!important; }
+[data-native-ui-snapshot-visible][data-native-ui-snapshot][data-native-ui-snapshot]::before { opacity:1!important; }
+`;

package/dist/types.d.ts

@@ -0,0 +1,88 @@
+import type { WebProjectionScope } from './web-projection-scope.js';
+/** All wire coordinates are CSS pixels, relative to the Web viewport. */
+export interface Frame {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface ScrollPlacement {
+    id: string;
+    reuse?: boolean;
+    offsetX: number;
+    offsetY: number;
+    viewport: Frame;
+    clip: Frame;
+    contentWidth: number;
+    contentHeight: number;
+    frame: Frame;
+}
+/** A source and its native rendering. Kind/placement are opaque layout identity keys. */
+export interface WebProjectionSource {
+    element: HTMLElement;
+    sources?: HTMLElement[];
+    scrollElement?: HTMLElement;
+    control: Frame & {
+        id: string;
+        kind?: string;
+        placement?: string;
+        dark?: boolean;
+        rtl?: boolean;
+        scroll?: ScrollPlacement;
+    };
+}
+/** Multiple fixed fallback elements sharing one Native capture/cover/restore transaction. */
+export interface ScopedWebProjectionSource extends WebProjectionSource {
+    scope: WebProjectionScope;
+}
+export interface PreparedWebProjection {
+    token: string;
+    parts: (Frame & {
+        ids: string[];
+        url: string;
+    })[];
+}
+/** Each action carries only the fields required by that phase of handoff. */
+export type WebProjectionRequest = {
+    action: 'prepare';
+    revision: number;
+    viewportWidth: number;
+    ids: string[];
+} | {
+    action: 'cover';
+    token: string;
+    transient?: boolean;
+} | {
+    action: 'restore';
+    token: string;
+    viewportWidth: number;
+    parts: (Frame & {
+        ids: string[];
+    })[];
+} | {
+    action: 'prepared' | 'painted' | 'restored' | 'release';
+    token: string;
+} | {
+    action: 'reset';
+};
+/** Empty prepare results mean capture is unavailable; a partial capture is never valid. */
+export type WebProjectionResult<Request extends WebProjectionRequest> = Request extends {
+    action: 'prepare';
+} ? PreparedWebProjection | {
+    token?: never;
+    parts?: never;
+} : Request extends {
+    action: 'cover' | 'restore';
+} ? {
+    shown: boolean;
+} : void;
+export interface ListenerHandle {
+    remove(): Promise<void> | void;
+}
+/** Implement with the owning plugin's existing ordered transport. No engine plugin registration. */
+export interface WebProjectionTransport {
+    send<Request extends WebProjectionRequest>(request: Request): Promise<WebProjectionResult<Request>>;
+    listen(listener: (event: {
+        active: boolean;
+    }) => void): Promise<ListenerHandle>;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/visibility.d.ts

@@ -0,0 +1,6 @@
+/** Current CSS visibility without the Engine's projection hiding rules.
+ * Use when an existing renderer decides whether its DOM source is authored hidden.
+ * Projection attributes are restored synchronously before returning; this performs
+ * a style read and may notify MutationObservers, so it is not a cached measurement.
+ */
+export declare const getUnprojectedVisibility: (element: HTMLElement) => string;

package/dist/visibility.js

@@ -0,0 +1,29 @@
+import { projectionAncestors } from './geometry.js';
+/** Current CSS visibility without the Engine's projection hiding rules.
+ * Use when an existing renderer decides whether its DOM source is authored hidden.
+ * Projection attributes are restored synchronously before returning; this performs
+ * a style read and may notify MutationObservers, so it is not a cached measurement.
+ */
+export const getUnprojectedVisibility = (element) => {
+    const win = element.ownerDocument.defaultView;
+    if (!win)
+        return 'hidden';
+    const markers = [];
+    for (const node of [element, ...projectionAncestors(element)]) {
+        for (const attribute of Array.from(node.attributes)) {
+            if (attribute.name === 'data-native-ui-snapshot-source' ||
+                attribute.name === 'data-native-ui-snapshot-prepared' ||
+                attribute.name.startsWith('data-native-ui-session-'))
+                markers.push({ node, name: attribute.name, value: attribute.value });
+        }
+    }
+    try {
+        for (const { node, name } of markers)
+            node.removeAttribute(name);
+        return win.getComputedStyle(element).visibility;
+    }
+    finally {
+        for (const { node, name, value } of markers)
+            node.setAttribute(name, value);
+    }
+};

package/dist/web-projection-scope.d.ts

@@ -0,0 +1,6 @@
+/** A fixed Web fallback element. A replacement element requires a new scope. */
+export declare const createWebProjectionScope: (element: HTMLElement, namespace: string) => Readonly<{
+    element: HTMLElement;
+    namespace: string;
+}>;
+export type WebProjectionScope = ReturnType<typeof createWebProjectionScope>;

package/dist/web-projection-scope.js

@@ -0,0 +1,8 @@
+/** A fixed Web fallback element. A replacement element requires a new scope. */
+export const createWebProjectionScope = (element, namespace) => {
+    if (element.nodeType !== 1 || element.namespaceURI !== 'http://www.w3.org/1999/xhtml' || !element.ownerDocument || !('style' in element))
+        throw new TypeError('A Web projection scope requires an HTMLElement fallback');
+    if (element.matches('img, input, textarea, select, video, audio, canvas, iframe, embed, object, br, hr, area, base, link, meta, source, track, wbr'))
+        throw new TypeError('A Web projection fallback must support ::before; use its existing container element');
+    return Object.freeze({ element, namespace });
+};