@microsoft/fast-element 2.0.0-beta.16 → 2.0.0-beta.18

package/dist/fast-element.js

@@ -1,10 +1,26 @@
+/**
+ * @internal
+ */
+const isFunction = (object) => typeof object === "function";
+/**
+ * @internal
+ */
+const isString = (object) => typeof object === "string";
+/**
+ * @internal
+ */
+const noop = () => void 0;
+
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 (function ensureGlobalThis() {
     if (typeof globalThis !== "undefined") {
         // We're running in a modern environment.
         return;
     }
+    // @ts-ignore
     if (typeof global !== "undefined") {
         // We're running in NodeJS
+        // @ts-ignore
         global.globalThis = global;
     }
     else if (typeof self !== "undefined") {
@@ -22,14 +38,8 @@
         result.globalThis = result;
     }
 })();
-// API-only Polyfill for trustedTypes
-if (!globalThis.trustedTypes) {
-    globalThis.trustedTypes = {
-        createPolicy: (n, r) => r,
-    };
-}
 
-// ensure FAST global - duplicated in polyfills.ts and debug.ts
+// ensure FAST global - duplicated debug.ts
 const propConfig = {
     configurable: false,
     enumerable: false,
@@ -117,15 +127,6 @@ function createMetadataLocator() {
     };
 }
 
-/**
- * @internal
- */
-const isFunction = (object) => typeof object === "function";
-/**
- * @internal
- */
-const isString = (object) => typeof object === "string";
-
 /**
  * The default UpdateQueue.
  * @public
@@ -192,6 +193,456 @@ const Updates = FAST.getById(1 /* KernelServiceId.updateQueue */, () => {
     });
 });
 
+/**
+ * The type of HTML aspect to target.
+ * @public
+ */
+const DOMAspect = Object.freeze({
+    /**
+     * Not aspected.
+     */
+    none: 0,
+    /**
+     * An attribute.
+     */
+    attribute: 1,
+    /**
+     * A boolean attribute.
+     */
+    booleanAttribute: 2,
+    /**
+     * A property.
+     */
+    property: 3,
+    /**
+     * Content
+     */
+    content: 4,
+    /**
+     * A token list.
+     */
+    tokenList: 5,
+    /**
+     * An event.
+     */
+    event: 6,
+});
+const createHTML$1 = html => html;
+const fastTrustedType = globalThis.trustedTypes
+    ? globalThis.trustedTypes.createPolicy("fast-html", { createHTML: createHTML$1 })
+    : { createHTML: createHTML$1 };
+let defaultPolicy = Object.freeze({
+    createHTML(value) {
+        return fastTrustedType.createHTML(value);
+    },
+    protect(tagName, aspect, aspectName, sink) {
+        return sink;
+    },
+});
+const fastPolicy = defaultPolicy;
+/**
+ * Common DOM APIs.
+ * @public
+ */
+const DOM = Object.freeze({
+    /**
+     * @deprecated
+     * Use Updates.enqueue().
+     */
+    queueUpdate: Updates.enqueue,
+    /**
+     * @deprecated
+     * Use Updates.next()
+     */
+    nextUpdate: Updates.next,
+    /**
+     * @deprecated
+     * Use Updates.process()
+     */
+    processUpdates: Updates.process,
+    /**
+     * Gets the dom policy used by the templating system.
+     */
+    get policy() {
+        return defaultPolicy;
+    },
+    /**
+     * Sets the dom policy used by the templating system.
+     * @param policy - The policy to set.
+     * @remarks
+     * This API can only be called once, for security reasons. It should be
+     * called by the application developer at the start of their program.
+     */
+    setPolicy(value) {
+        if (defaultPolicy !== fastPolicy) {
+            throw FAST.error(1201 /* Message.onlySetDOMPolicyOnce */);
+        }
+        defaultPolicy = value;
+    },
+    /**
+     * Sets an attribute value on an element.
+     * @param element - The element to set the attribute value on.
+     * @param attributeName - The attribute name to set.
+     * @param value - The value of the attribute to set.
+     * @remarks
+     * If the value is `null` or `undefined`, the attribute is removed, otherwise
+     * it is set to the provided value using the standard `setAttribute` API.
+     */
+    setAttribute(element, attributeName, value) {
+        value === null || value === undefined
+            ? element.removeAttribute(attributeName)
+            : element.setAttribute(attributeName, value);
+    },
+    /**
+     * Sets a boolean attribute value.
+     * @param element - The element to set the boolean attribute value on.
+     * @param attributeName - The attribute name to set.
+     * @param value - The value of the attribute to set.
+     * @remarks
+     * If the value is true, the attribute is added; otherwise it is removed.
+     */
+    setBooleanAttribute(element, attributeName, value) {
+        value
+            ? element.setAttribute(attributeName, "")
+            : element.removeAttribute(attributeName);
+    },
+});
+
+function safeURL(tagName, aspect, aspectName, sink) {
+    return (target, name, value, ...rest) => {
+        if (isString(value)) {
+            value = value.replace("javascript:", "");
+        }
+        sink(target, name, value, ...rest);
+    };
+}
+function block(tagName, aspect, aspectName, sink) {
+    throw new Error(`${aspectName} on ${tagName !== null && tagName !== void 0 ? tagName : "text"} is blocked by the current DOMPolicy.`);
+}
+const defaultDOMElementGuards = {
+    a: {
+        [DOMAspect.attribute]: {
+            href: safeURL,
+        },
+        [DOMAspect.property]: {
+            href: safeURL,
+        },
+    },
+    area: {
+        [DOMAspect.attribute]: {
+            href: safeURL,
+        },
+        [DOMAspect.property]: {
+            href: safeURL,
+        },
+    },
+    button: {
+        [DOMAspect.attribute]: {
+            formaction: safeURL,
+        },
+        [DOMAspect.property]: {
+            formAction: safeURL,
+        },
+    },
+    embed: {
+        [DOMAspect.attribute]: {
+            src: block,
+        },
+        [DOMAspect.property]: {
+            src: block,
+        },
+    },
+    form: {
+        [DOMAspect.attribute]: {
+            action: safeURL,
+        },
+        [DOMAspect.property]: {
+            action: safeURL,
+        },
+    },
+    frame: {
+        [DOMAspect.attribute]: {
+            src: safeURL,
+        },
+        [DOMAspect.property]: {
+            src: safeURL,
+        },
+    },
+    iframe: {
+        [DOMAspect.attribute]: {
+            src: safeURL,
+        },
+        [DOMAspect.property]: {
+            src: safeURL,
+            srcdoc: block,
+        },
+    },
+    input: {
+        [DOMAspect.attribute]: {
+            formaction: safeURL,
+        },
+        [DOMAspect.property]: {
+            formAction: safeURL,
+        },
+    },
+    link: {
+        [DOMAspect.attribute]: {
+            href: block,
+        },
+        [DOMAspect.property]: {
+            href: block,
+        },
+    },
+    object: {
+        [DOMAspect.attribute]: {
+            codebase: block,
+            data: block,
+        },
+        [DOMAspect.property]: {
+            codeBase: block,
+            data: block,
+        },
+    },
+    script: {
+        [DOMAspect.attribute]: {
+            src: block,
+            text: block,
+        },
+        [DOMAspect.property]: {
+            src: block,
+            text: block,
+            innerText: block,
+            textContent: block,
+        },
+    },
+    style: {
+        [DOMAspect.property]: {
+            innerText: block,
+            textContent: block,
+        },
+    },
+};
+const blockedEvents = {
+    onabort: block,
+    onauxclick: block,
+    onbeforeinput: block,
+    onbeforematch: block,
+    onblur: block,
+    oncancel: block,
+    oncanplay: block,
+    oncanplaythrough: block,
+    onchange: block,
+    onclick: block,
+    onclose: block,
+    oncontextlost: block,
+    oncontextmenu: block,
+    oncontextrestored: block,
+    oncopy: block,
+    oncuechange: block,
+    oncut: block,
+    ondblclick: block,
+    ondrag: block,
+    ondragend: block,
+    ondragenter: block,
+    ondragleave: block,
+    ondragover: block,
+    ondragstart: block,
+    ondrop: block,
+    ondurationchange: block,
+    onemptied: block,
+    onended: block,
+    onerror: block,
+    onfocus: block,
+    onformdata: block,
+    oninput: block,
+    oninvalid: block,
+    onkeydown: block,
+    onkeypress: block,
+    onkeyup: block,
+    onload: block,
+    onloadeddata: block,
+    onloadedmetadata: block,
+    onloadstart: block,
+    onmousedown: block,
+    onmouseenter: block,
+    onmouseleave: block,
+    onmousemove: block,
+    onmouseout: block,
+    onmouseover: block,
+    onmouseup: block,
+    onpaste: block,
+    onpause: block,
+    onplay: block,
+    onplaying: block,
+    onprogress: block,
+    onratechange: block,
+    onreset: block,
+    onresize: block,
+    onscroll: block,
+    onsecuritypolicyviolation: block,
+    onseeked: block,
+    onseeking: block,
+    onselect: block,
+    onslotchange: block,
+    onstalled: block,
+    onsubmit: block,
+    onsuspend: block,
+    ontimeupdate: block,
+    ontoggle: block,
+    onvolumechange: block,
+    onwaiting: block,
+    onwebkitanimationend: block,
+    onwebkitanimationiteration: block,
+    onwebkitanimationstart: block,
+    onwebkittransitionend: block,
+    onwheel: block,
+};
+const defaultDOMGuards = {
+    elements: defaultDOMElementGuards,
+    aspects: {
+        [DOMAspect.attribute]: Object.assign({}, blockedEvents),
+        [DOMAspect.property]: Object.assign({ innerHTML: block }, blockedEvents),
+        [DOMAspect.event]: Object.assign({}, blockedEvents),
+    },
+};
+function createDomSinkGuards(config, defaults) {
+    const result = {};
+    for (const name in defaults) {
+        const overrideValue = config[name];
+        const defaultValue = defaults[name];
+        switch (overrideValue) {
+            case null:
+                // remove the default
+                break;
+            case undefined:
+                // keep the default
+                result[name] = defaultValue;
+                break;
+            default:
+                // override the default
+                result[name] = overrideValue;
+                break;
+        }
+    }
+    // add any new sinks that were not overrides
+    for (const name in config) {
+        if (!(name in result)) {
+            result[name] = config[name];
+        }
+    }
+    return Object.freeze(result);
+}
+function createDOMAspectGuards(config, defaults) {
+    const result = {};
+    for (const aspect in defaults) {
+        const overrideValue = config[aspect];
+        const defaultValue = defaults[aspect];
+        switch (overrideValue) {
+            case null:
+                // remove the default
+                break;
+            case undefined:
+                // keep the default
+                result[aspect] = createDomSinkGuards(defaultValue, {});
+                break;
+            default:
+                // override the default
+                result[aspect] = createDomSinkGuards(overrideValue, defaultValue);
+                break;
+        }
+    }
+    // add any new aspect guards that were not overrides
+    for (const aspect in config) {
+        if (!(aspect in result)) {
+            result[aspect] = createDomSinkGuards(config[aspect], {});
+        }
+    }
+    return Object.freeze(result);
+}
+function createElementGuards(config, defaults) {
+    const result = {};
+    for (const tag in defaults) {
+        const overrideValue = config[tag];
+        const defaultValue = defaults[tag];
+        switch (overrideValue) {
+            case null:
+                // remove the default
+                break;
+            case undefined:
+                // keep the default
+                result[tag] = createDOMAspectGuards(overrideValue, {});
+                break;
+            default:
+                // override the default aspects
+                result[tag] = createDOMAspectGuards(overrideValue, defaultValue);
+                break;
+        }
+    }
+    // Add any new element guards that were not overrides
+    for (const tag in config) {
+        if (!(tag in result)) {
+            result[tag] = createDOMAspectGuards(config[tag], {});
+        }
+    }
+    return Object.freeze(result);
+}
+function createDOMGuards(config, defaults) {
+    return Object.freeze({
+        elements: config.elements
+            ? createElementGuards(config.elements, defaults.elements)
+            : defaults.elements,
+        aspects: config.aspects
+            ? createDOMAspectGuards(config.aspects, defaults.aspects)
+            : defaults.aspects,
+    });
+}
+function createTrustedType() {
+    const createHTML = html => html;
+    return globalThis.trustedTypes
+        ? globalThis.trustedTypes.createPolicy("fast-html", { createHTML })
+        : { createHTML };
+}
+function tryGuard(aspectGuards, tagName, aspect, aspectName, sink) {
+    const sinkGuards = aspectGuards[aspect];
+    if (sinkGuards) {
+        const guard = sinkGuards[aspectName];
+        if (guard) {
+            return guard(tagName, aspect, aspectName, sink);
+        }
+    }
+}
+const DOMPolicy = Object.freeze({
+    /**
+     * Creates a new DOM Policy object.
+     * @param options The options to use in creating the policy.
+     * @returns The newly created DOMPolicy.
+     */
+    create(options = {}) {
+        var _a, _b;
+        const trustedType = (_a = options.trustedType) !== null && _a !== void 0 ? _a : createTrustedType();
+        const guards = createDOMGuards((_b = options.guards) !== null && _b !== void 0 ? _b : {}, defaultDOMGuards);
+        return Object.freeze({
+            createHTML(value) {
+                return trustedType.createHTML(value);
+            },
+            protect(tagName, aspect, aspectName, sink) {
+                var _a;
+                // Check for element-specific guards.
+                const key = (tagName !== null && tagName !== void 0 ? tagName : "").toLowerCase();
+                const elementGuards = guards.elements[key];
+                if (elementGuards) {
+                    const guard = tryGuard(elementGuards, tagName, aspect, aspectName, sink);
+                    if (guard) {
+                        return guard;
+                    }
+                }
+                // Check for guards applicable to all nodes.
+                return ((_a = tryGuard(guards.aspects, tagName, aspect, aspectName, sink)) !== null && _a !== void 0 ? _a : sink);
+            },
+        });
+    },
+});
+
 /**
  * An implementation of {@link Notifier} that efficiently keeps track of
  * subscribers interested in a specific change notification on an
@@ -434,6 +885,10 @@ const Observable = FAST.getById(2 /* KernelServiceId.observable */, () => {
             this.propertyName = void 0;
             this.notifier = void 0;
             this.next = void 0;
+            /**
+             * Opts out of JSON stringification.
+             */
+            this.toJSON = noop;
         }
         setMode(isAsync) {
             this.isAsync = this.needsQueue = isAsync;
@@ -1474,55 +1929,6 @@ css.partial = (strings, ...values) => {
  */
 const cssPartial = css.partial;
 
-/**
- * Common DOM APIs.
- * @public
- */
-const DOM = Object.freeze({
-    /**
-     * @deprecated
-     * Use Updates.enqueue().
-     */
-    queueUpdate: Updates.enqueue,
-    /**
-     * @deprecated
-     * Use Updates.next()
-     */
-    nextUpdate: Updates.next,
-    /**
-     * @deprecated
-     * Use Updates.process()
-     */
-    processUpdates: Updates.process,
-    /**
-     * Sets an attribute value on an element.
-     * @param element - The element to set the attribute value on.
-     * @param attributeName - The attribute name to set.
-     * @param value - The value of the attribute to set.
-     * @remarks
-     * If the value is `null` or `undefined`, the attribute is removed, otherwise
-     * it is set to the provided value using the standard `setAttribute` API.
-     */
-    setAttribute(element, attributeName, value) {
-        value === null || value === undefined
-            ? element.removeAttribute(attributeName)
-            : element.setAttribute(attributeName, value);
-    },
-    /**
-     * Sets a boolean attribute value.
-     * @param element - The element to set the boolean attribute value on.
-     * @param attributeName - The attribute name to set.
-     * @param value - The value of the attribute to set.
-     * @remarks
-     * If the value is true, the attribute is added; otherwise it is removed.
-     */
-    setBooleanAttribute(element, attributeName, value) {
-        value
-            ? element.setAttribute(attributeName, "")
-            : element.removeAttribute(attributeName);
-    },
-});
-
 const marker = `fast-${Math.random().toString(36).substring(2, 8)}`;
 const interpolationStart = `${marker}{`;
 const interpolationEnd = `}${marker}`;
@@ -1599,67 +2005,6 @@ const Parser = Object.freeze({
     },
 });
 
-/**
- * Bridges between ViewBehaviors and HostBehaviors, enabling a host to
- * control ViewBehaviors.
- * @public
- */
-const ViewBehaviorOrchestrator = Object.freeze({
-    /**
-     * Creates a ViewBehaviorOrchestrator.
-     * @param source - The source to to associate behaviors with.
-     * @returns A ViewBehaviorOrchestrator.
-     */
-    create(source) {
-        const behaviors = [];
-        const targets = {};
-        let unbindables = null;
-        let isConnected = false;
-        return {
-            source,
-            context: ExecutionContext.default,
-            targets,
-            get isBound() {
-                return isConnected;
-            },
-            addBehaviorFactory(factory, target) {
-                const nodeId = factory.nodeId || (factory.nodeId = nextId());
-                factory.id || (factory.id = nextId());
-                this.addTarget(nodeId, target);
-                this.addBehavior(factory.createBehavior());
-            },
-            addTarget(nodeId, target) {
-                targets[nodeId] = target;
-            },
-            addBehavior(behavior) {
-                behaviors.push(behavior);
-                if (isConnected) {
-                    behavior.bind(this);
-                }
-            },
-            onUnbind(unbindable) {
-                if (unbindables === null) {
-                    unbindables = [];
-                }
-                unbindables.push(unbindable);
-            },
-            connectedCallback(controller) {
-                if (!isConnected) {
-                    isConnected = true;
-                    behaviors.forEach(x => x.bind(this));
-                }
-            },
-            disconnectedCallback(controller) {
-                if (isConnected) {
-                    isConnected = false;
-                    if (unbindables !== null) {
-                        unbindables.forEach(x => x.unbind(this));
-                    }
-                }
-            },
-        };
-    },
-});
 const registry = createTypeRegistry();
 /**
  * Instructs the template engine to apply behavior to a node.
@@ -1687,67 +2032,6 @@ const HTMLDirective = Object.freeze({
         registry.register(options);
         return type;
     },
-});
-/**
- * Decorator: Defines an HTMLDirective.
- * @param options - Provides options that specify the directive's application.
- * @public
- */
-function htmlDirective(options) {
-    /* eslint-disable-next-line @typescript-eslint/explicit-function-return-type */
-    return function (type) {
-        HTMLDirective.define(type, options);
-    };
-}
-/**
- * Captures a binding expression along with related information and capabilities.
- *
- * @public
- */
-class Binding {
-    /**
-     * Creates a binding.
-     * @param evaluate - Evaluates the binding.
-     * @param isVolatile - Indicates whether the binding is volatile.
-     */
-    constructor(evaluate, isVolatile = false) {
-        this.evaluate = evaluate;
-        this.isVolatile = isVolatile;
-    }
-}
-/**
- * The type of HTML aspect to target.
- * @public
- */
-const Aspect = Object.freeze({
-    /**
-     * Not aspected.
-     */
-    none: 0,
-    /**
-     * An attribute.
-     */
-    attribute: 1,
-    /**
-     * A boolean attribute.
-     */
-    booleanAttribute: 2,
-    /**
-     * A property.
-     */
-    property: 3,
-    /**
-     * Content
-     */
-    content: 4,
-    /**
-     * A token list.
-     */
-    tokenList: 5,
-    /**
-     * An event.
-     */
-    event: 6,
     /**
      *
      * @param directive - The directive to assign the aspect to.
@@ -1755,9 +2039,9 @@ const Aspect = Object.freeze({
      * @remarks
      * If a falsy value is provided, then the content aspect will be assigned.
      */
-    assign(directive, value) {
+    assignAspect(directive, value) {
         if (!value) {
-            directive.aspectType = Aspect.content;
+            directive.aspectType = DOMAspect.content;
             return;
         }
         directive.sourceAspect = value;
@@ -1766,24 +2050,53 @@ const Aspect = Object.freeze({
                 directive.targetAspect = value.substring(1);
                 directive.aspectType =
                     directive.targetAspect === "classList"
-                        ? Aspect.tokenList
-                        : Aspect.property;
+                        ? DOMAspect.tokenList
+                        : DOMAspect.property;
                 break;
             case "?":
                 directive.targetAspect = value.substring(1);
-                directive.aspectType = Aspect.booleanAttribute;
+                directive.aspectType = DOMAspect.booleanAttribute;
                 break;
             case "@":
                 directive.targetAspect = value.substring(1);
-                directive.aspectType = Aspect.event;
+                directive.aspectType = DOMAspect.event;
                 break;
             default:
                 directive.targetAspect = value;
-                directive.aspectType = Aspect.attribute;
+                directive.aspectType = DOMAspect.attribute;
                 break;
         }
     },
 });
+/**
+ * Decorator: Defines an HTMLDirective.
+ * @param options - Provides options that specify the directive's application.
+ * @public
+ */
+function htmlDirective(options) {
+    /* eslint-disable-next-line @typescript-eslint/explicit-function-return-type */
+    return function (type) {
+        HTMLDirective.define(type, options);
+    };
+}
+/**
+ * Captures a binding expression along with related information and capabilities.
+ *
+ * @public
+ */
+class Binding {
+    /**
+     * Creates a binding.
+     * @param evaluate - Evaluates the binding.
+     * @param policy - The security policy to associate with this binding.
+     * @param isVolatile - Indicates whether the binding is volatile.
+     */
+    constructor(evaluate, policy, isVolatile = false) {
+        this.evaluate = evaluate;
+        this.policy = policy;
+        this.isVolatile = isVolatile;
+    }
+}
 /**
  * A base class used for attribute directives that don't need internal state.
  * @public
@@ -1796,9 +2109,10 @@ class StatelessAttachedAttributeDirective {
     constructor(options) {
         this.options = options;
         /**
-         * The unique id of the factory.
+         * Opts out of JSON stringification.
+         * @internal
          */
-        this.id = nextId();
+        this.toJSON = noop;
     }
     /**
      * Creates a placeholder string based on the directive's index within the template.
@@ -1818,21 +2132,20 @@ class StatelessAttachedAttributeDirective {
     }
 }
 
-const createInnerHTMLBinding = globalThis.TrustedHTML
-    ? (binding) => (s, c) => {
-        const value = binding(s, c);
-        if (value instanceof TrustedHTML) {
-            return value;
-        }
-        throw FAST.error(1202 /* Message.bindingInnerHTMLRequiresTrustedTypes */);
-    }
-    : (binding) => binding;
 class OnChangeBinding extends Binding {
     createObserver(_, subscriber) {
         return Observable.binding(this.evaluate, subscriber, this.isVolatile);
     }
 }
 class OneTimeBinding extends Binding {
+    constructor() {
+        super(...arguments);
+        /**
+         * Opts out of JSON stringification.
+         * @internal
+         */
+        this.toJSON = noop;
+    }
     createObserver() {
         return this;
     }
@@ -1931,8 +2244,14 @@ function updateTokenList(target, aspect, value) {
         }
     }
 }
-const setProperty = (t, a, v) => (t[a] = v);
-const eventTarget = () => void 0;
+const sinkLookup = {
+    [DOMAspect.attribute]: DOM.setAttribute,
+    [DOMAspect.booleanAttribute]: DOM.setBooleanAttribute,
+    [DOMAspect.property]: (t, a, v) => (t[a] = v),
+    [DOMAspect.content]: updateContent,
+    [DOMAspect.tokenList]: updateTokenList,
+    [DOMAspect.event]: () => void 0,
+};
 /**
  * A directive that applies bindings.
  * @public
@@ -1945,15 +2264,10 @@ class HTMLBindingDirective {
     constructor(dataBinding) {
         this.dataBinding = dataBinding;
         this.updateTarget = null;
-        /**
-         * The unique id of the factory.
-         */
-        this.id = nextId();
         /**
          * The type of aspect to target.
          */
-        this.aspectType = Aspect.content;
-        this.data = `${this.id}-d`;
+        this.aspectType = DOMAspect.content;
     }
     /**
      * Creates HTML to be used within a template.
@@ -1966,45 +2280,28 @@ class HTMLBindingDirective {
      * Creates a behavior.
      */
     createBehavior() {
+        var _a;
         if (this.updateTarget === null) {
-            if (this.targetAspect === "innerHTML") {
-                this.dataBinding.evaluate = createInnerHTMLBinding(this.dataBinding.evaluate);
-            }
-            switch (this.aspectType) {
-                case 1:
-                    this.updateTarget = DOM.setAttribute;
-                    break;
-                case 2:
-                    this.updateTarget = DOM.setBooleanAttribute;
-                    break;
-                case 3:
-                    this.updateTarget = setProperty;
-                    break;
-                case 4:
-                    this.updateTarget = updateContent;
-                    break;
-                case 5:
-                    this.updateTarget = updateTokenList;
-                    break;
-                case 6:
-                    this.updateTarget = eventTarget;
-                    break;
-                default:
-                    throw FAST.error(1205 /* Message.unsupportedBindingBehavior */);
+            const sink = sinkLookup[this.aspectType];
+            const policy = (_a = this.dataBinding.policy) !== null && _a !== void 0 ? _a : this.policy;
+            if (!sink) {
+                throw FAST.error(1205 /* Message.unsupportedBindingBehavior */);
             }
+            this.data = `${this.id}-d`;
+            this.updateTarget = policy.protect(this.targetTagName, this.aspectType, this.targetAspect, sink);
         }
         return this;
     }
     /** @internal */
     bind(controller) {
         var _a;
-        const target = controller.targets[this.nodeId];
-        switch (this.updateTarget) {
-            case eventTarget:
+        const target = controller.targets[this.targetNodeId];
+        switch (this.aspectType) {
+            case DOMAspect.event:
                 target[this.data] = controller;
                 target.addEventListener(this.targetAspect, this, this.dataBinding.options);
                 break;
-            case updateContent:
+            case DOMAspect.content:
                 controller.onUnbind(this);
             // intentional fall through
             default:
@@ -2017,7 +2314,7 @@ class HTMLBindingDirective {
     }
     /** @internal */
     unbind(controller) {
-        const target = controller.targets[this.nodeId];
+        const target = controller.targets[this.targetNodeId];
         const view = target.$fastView;
         if (view !== void 0 && view.isComposed) {
             view.unbind();
@@ -2047,21 +2344,23 @@ HTMLDirective.define(HTMLBindingDirective, { aspected: true });
 /**
  * Creates an standard binding.
  * @param expression - The binding to refresh when changed.
+ * @param policy - The security policy to associate with th binding.
  * @param isVolatile - Indicates whether the binding is volatile or not.
  * @returns A binding configuration.
  * @public
  */
-function bind(expression, isVolatile = Observable.isVolatileBinding(expression)) {
-    return new OnChangeBinding(expression, isVolatile);
+function bind(expression, policy, isVolatile = Observable.isVolatileBinding(expression)) {
+    return new OnChangeBinding(expression, policy, isVolatile);
 }
 /**
  * Creates a one time binding
  * @param expression - The binding to refresh when signaled.
+ * @param policy - The security policy to associate with th binding.
  * @returns A binding configuration.
  * @public
  */
-function oneTime(expression) {
-    return new OneTimeBinding(expression);
+function oneTime(expression, policy) {
+    return new OneTimeBinding(expression, policy);
 }
 /**
  * Creates an event listener binding.
@@ -2071,7 +2370,7 @@ function oneTime(expression) {
  * @public
  */
 function listener(expression, options) {
-    const config = new OnChangeBinding(expression, false);
+    const config = new OnChangeBinding(expression);
     config.options = options;
     return config;
 }
@@ -2140,6 +2439,11 @@ class HTMLView {
          * The length of the current collection within a repeat context.
          */
         this.length = 0;
+        /**
+         * Opts out of JSON stringification.
+         * @internal
+         */
+        this.toJSON = noop;
         this.firstChild = fragment.firstChild;
         this.lastChild = fragment.lastChild;
     }
@@ -2347,20 +2651,25 @@ const warningHost = new Proxy(document.createElement("div"), {
     },
 });
 class CompilationContext {
-    constructor(fragment, directives) {
+    constructor(fragment, directives, policy) {
         this.fragment = fragment;
         this.directives = directives;
+        this.policy = policy;
         this.proto = null;
         this.nodeIds = new Set();
         this.descriptors = {};
         this.factories = [];
     }
-    addFactory(factory, parentId, nodeId, targetIndex) {
+    addFactory(factory, parentId, nodeId, targetIndex, tagName) {
+        var _a, _b;
         if (!this.nodeIds.has(nodeId)) {
             this.nodeIds.add(nodeId);
             this.addTargetDescriptor(parentId, nodeId, targetIndex);
         }
-        factory.nodeId = nodeId;
+        factory.id = (_a = factory.id) !== null && _a !== void 0 ? _a : nextId();
+        factory.targetNodeId = nodeId;
+        factory.targetTagName = tagName;
+        factory.policy = (_b = factory.policy) !== null && _b !== void 0 ? _b : this.policy;
         this.factories.push(factory);
     }
     freeze() {
@@ -2413,19 +2722,19 @@ function compileAttributes(context, parentId, node, nodeId, nodeIndex, includeBa
         let result = null;
         if (parseResult === null) {
             if (includeBasicValues) {
-                result = new HTMLBindingDirective(oneTime(() => attrValue));
-                Aspect.assign(result, attr.name);
+                result = new HTMLBindingDirective(oneTime(() => attrValue, context.policy));
+                HTMLDirective.assignAspect(result, attr.name);
             }
         }
         else {
             /* eslint-disable-next-line @typescript-eslint/no-use-before-define */
-            result = Compiler.aggregate(parseResult);
+            result = Compiler.aggregate(parseResult, context.policy);
         }
         if (result !== null) {
             node.removeAttributeNode(attr);
             i--;
             ii--;
-            context.addFactory(result, parentId, nodeId, nodeIndex);
+            context.addFactory(result, parentId, nodeId, nodeIndex, node.tagName);
         }
     }
 }
@@ -2450,8 +2759,8 @@ function compileContent(context, node, parentId, nodeId, nodeIndex) {
         }
         else {
             currentNode.textContent = " ";
-            Aspect.assign(currentPart);
-            context.addFactory(currentPart, parentId, nodeId, nodeIndex);
+            HTMLDirective.assignAspect(currentPart);
+            context.addFactory(currentPart, parentId, nodeId, nodeIndex, null);
         }
         lastNode = currentNode;
     }
@@ -2483,7 +2792,7 @@ function compileNode(context, parentId, node, nodeIndex) {
             if (parts !== null) {
                 context.addFactory(
                 /* eslint-disable-next-line @typescript-eslint/no-use-before-define */
-                Compiler.aggregate(parts), parentId, nodeId, nodeIndex);
+                Compiler.aggregate(parts), parentId, nodeId, nodeIndex, null);
             }
             break;
     }
@@ -2497,45 +2806,28 @@ function isMarker(node, directives) {
         Parser.parse(node.data, directives) !== null);
 }
 const templateTag = "TEMPLATE";
-const policyOptions = { createHTML: html => html };
-let htmlPolicy = globalThis.trustedTypes
-    ? globalThis.trustedTypes.createPolicy("fast-html", policyOptions)
-    : policyOptions;
-const fastHTMLPolicy = htmlPolicy;
 /**
  * Common APIs related to compilation.
  * @public
  */
 const Compiler = {
-    /**
-     * Sets the HTML trusted types policy used by the compiler.
-     * @param policy - The policy to set for HTML.
-     * @remarks
-     * This API can only be called once, for security reasons. It should be
-     * called by the application developer at the start of their program.
-     */
-    setHTMLPolicy(policy) {
-        if (htmlPolicy !== fastHTMLPolicy) {
-            throw FAST.error(1201 /* Message.onlySetHTMLPolicyOnce */);
-        }
-        htmlPolicy = policy;
-    },
     /**
      * Compiles a template and associated directives into a compilation
      * result which can be used to create views.
      * @param html - The html string or template element to compile.
-     * @param directives - The directives referenced by the template.
+     * @param factories - The behavior factories referenced by the template.
+     * @param policy - The security policy to compile the html with.
      * @remarks
      * The template that is provided for compilation is altered in-place
      * and cannot be compiled again. If the original template must be preserved,
      * it is recommended that you clone the original and pass the clone to this API.
      * @public
      */
-    compile(html, directives) {
+    compile(html, factories, policy = DOM.policy) {
         let template;
         if (isString(html)) {
             template = document.createElement(templateTag);
-            template.innerHTML = htmlPolicy.createHTML(html);
+            template.innerHTML = policy.createHTML(html);
             const fec = template.content.firstElementChild;
             if (fec !== null && fec.tagName === templateTag) {
                 template = fec;
@@ -2546,18 +2838,18 @@ const Compiler = {
         }
         // https://bugs.chromium.org/p/chromium/issues/detail?id=1111864
         const fragment = document.adoptNode(template.content);
-        const context = new CompilationContext(fragment, directives);
+        const context = new CompilationContext(fragment, factories, policy);
         compileAttributes(context, "", template, /* host */ "h", 0, true);
         if (
         // If the first node in a fragment is a marker, that means it's an unstable first node,
         // because something like a when, repeat, etc. could add nodes before the marker.
         // To mitigate this, we insert a stable first node. However, if we insert a node,
         // that will alter the result of the TreeWalker. So, we also need to offset the target index.
-        isMarker(fragment.firstChild, directives) ||
+        isMarker(fragment.firstChild, factories) ||
             // Or if there is only one node and a directive, it means the template's content
             // is *only* the directive. In that case, HTMLView.dispose() misses any nodes inserted by
             // the directive. Inserting a new node ensures proper disposal of nodes added by the directive.
-            (fragment.childNodes.length === 1 && Object.keys(directives).length > 0)) {
+            (fragment.childNodes.length === 1 && Object.keys(factories).length > 0)) {
             fragment.insertBefore(document.createComment(""), fragment.firstChild);
         }
         compileChildren(context, fragment, /* root */ "r");
@@ -2576,15 +2868,17 @@ const Compiler = {
      * Aggregates an array of strings and directives into a single directive.
      * @param parts - A heterogeneous array of static strings interspersed with
      * directives.
+     * @param policy - The security policy to use with the aggregated bindings.
      * @returns A single inline directive that aggregates the behavior of all the parts.
      */
-    aggregate(parts) {
+    aggregate(parts, policy = DOM.policy) {
         if (parts.length === 1) {
             return parts[0];
         }
         let sourceAspect;
         let binding;
         let isVolatile = false;
+        let bindingPolicy = void 0;
         const partCount = parts.length;
         const finalParts = parts.map((x) => {
             if (isString(x)) {
@@ -2593,6 +2887,7 @@ const Compiler = {
             sourceAspect = x.sourceAspect || sourceAspect;
             binding = x.dataBinding || binding;
             isVolatile = isVolatile || x.dataBinding.isVolatile;
+            bindingPolicy = bindingPolicy || x.dataBinding.policy;
             return x.dataBinding.evaluate;
         });
         const expression = (scope, context) => {
@@ -2604,12 +2899,26 @@ const Compiler = {
         };
         binding.evaluate = expression;
         binding.isVolatile = isVolatile;
+        binding.policy = bindingPolicy !== null && bindingPolicy !== void 0 ? bindingPolicy : policy;
         const directive = new HTMLBindingDirective(binding);
-        Aspect.assign(directive, sourceAspect);
+        HTMLDirective.assignAspect(directive, sourceAspect);
         return directive;
     },
 };
 
+// Much thanks to LitHTML for working this out!
+const lastAttributeNameRegex = 
+/* eslint-disable-next-line no-control-regex */
+/([ \x09\x0a\x0c\x0d])([^\0-\x1F\x7F-\x9F "'>=/]+)([ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*))$/;
+function createHTML(value, prevString, add, definition = HTMLDirective.getForInstance(value)) {
+    if (definition.aspected) {
+        const match = lastAttributeNameRegex.exec(prevString);
+        if (match !== null) {
+            HTMLDirective.assignAspect(value, match[2]);
+        }
+    }
+    return value.createHTML(add);
+}
 /**
  * A template capable of creating HTMLView instances or rendering directly to DOM.
  * @public
@@ -2619,9 +2928,16 @@ class ViewTemplate {
      * Creates an instance of ViewTemplate.
      * @param html - The html representing what this template will instantiate, including placeholders for directives.
      * @param factories - The directives that will be connected to placeholders in the html.
+     * @param policy - The security policy to use when compiling this template.
      */
-    constructor(html, factories) {
+    constructor(html, factories = {}, policy) {
+        this.policy = policy;
         this.result = null;
+        /**
+         * Opts out of JSON stringification.
+         * @internal
+         */
+        this.toJSON = noop;
         this.html = html;
         this.factories = factories;
     }
@@ -2631,10 +2947,28 @@ class ViewTemplate {
      */
     create(hostBindingTarget) {
         if (this.result === null) {
-            this.result = Compiler.compile(this.html, this.factories);
+            this.result = Compiler.compile(this.html, this.factories, this.policy);
         }
         return this.result.createView(hostBindingTarget);
     }
+    /**
+     * Sets the DOMPolicy for this template.
+     * @param policy - The policy to associated with this template.
+     * @returns The modified template instance.
+     * @remarks
+     * The DOMPolicy can only be set once for a template and cannot be
+     * set after the template is compiled.
+     */
+    withPolicy(policy) {
+        if (this.result) {
+            throw FAST.error(1208 /* Message.cannotSetTemplatePolicyAfterCompilation */);
+        }
+        if (this.policy) {
+            throw FAST.error(1207 /* Message.onlySetTemplatePolicyOnce */);
+        }
+        this.policy = policy;
+        return this;
+    }
     /**
      * Creates an HTMLView from this template, binds it to the source, and then appends it to the host.
      * @param source - The data source to bind the template to.
@@ -2648,17 +2982,47 @@ class ViewTemplate {
         view.appendTo(host);
         return view;
     }
-}
-// Much thanks to LitHTML for working this out!
-const lastAttributeNameRegex = 
-/* eslint-disable-next-line no-control-regex */
-/([ \x09\x0a\x0c\x0d])([^\0-\x1F\x7F-\x9F "'>=/]+)([ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*))$/;
-function createAspectedHTML(value, prevString, add) {
-    const match = lastAttributeNameRegex.exec(prevString);
-    if (match !== null) {
-        Aspect.assign(value, match[2]);
+    /**
+     * Creates a template based on a set of static strings and dynamic values.
+     * @param strings - The static strings to create the template with.
+     * @param values - The dynamic values to create the template with.
+     * @param policy - The DOMPolicy to associated with the template.
+     * @returns A ViewTemplate.
+     * @remarks
+     * This API should not be used directly under normal circumstances because constructing
+     * a template in this way, if not done properly, can open up the application to XSS
+     * attacks. When using this API, provide a strong DOMPolicy that can properly sanitize
+     * and also be sure to manually sanitize all static strings particularly if they can
+     * come from user input.
+     */
+    static create(strings, values, policy) {
+        let html = "";
+        const factories = Object.create(null);
+        const add = (factory) => {
+            var _a;
+            const id = (_a = factory.id) !== null && _a !== void 0 ? _a : (factory.id = nextId());
+            factories[id] = factory;
+            return id;
+        };
+        for (let i = 0, ii = strings.length - 1; i < ii; ++i) {
+            const currentString = strings[i];
+            let currentValue = values[i];
+            let definition;
+            html += currentString;
+            if (isFunction(currentValue)) {
+                currentValue = new HTMLBindingDirective(bind(currentValue));
+            }
+            else if (currentValue instanceof Binding) {
+                currentValue = new HTMLBindingDirective(currentValue);
+            }
+            else if (!(definition = HTMLDirective.getForInstance(currentValue))) {
+                const staticValue = currentValue;
+                currentValue = new HTMLBindingDirective(oneTime(() => staticValue));
+            }
+            html += createHTML(currentValue, currentString, add, definition);
+        }
+        return new ViewTemplate(html + strings[strings.length - 1], factories, policy);
     }
-    return value.createHTML(add);
 }
 /**
  * Transforms a template literal string into a ViewTemplate.
@@ -2670,49 +3034,10 @@ function createAspectedHTML(value, prevString, add) {
  * @public
  */
 function html(strings, ...values) {
-    let html = "";
-    const factories = Object.create(null);
-    const add = (factory) => {
-        var _a;
-        const id = (_a = factory.id) !== null && _a !== void 0 ? _a : (factory.id = nextId());
-        factories[id] = factory;
-        return id;
-    };
-    for (let i = 0, ii = strings.length - 1; i < ii; ++i) {
-        const currentString = strings[i];
-        const currentValue = values[i];
-        let definition;
-        html += currentString;
-        if (isFunction(currentValue)) {
-            html += createAspectedHTML(new HTMLBindingDirective(bind(currentValue)), currentString, add);
-        }
-        else if (isString(currentValue)) {
-            const match = lastAttributeNameRegex.exec(currentString);
-            if (match !== null) {
-                const directive = new HTMLBindingDirective(oneTime(() => currentValue));
-                Aspect.assign(directive, match[2]);
-                html += directive.createHTML(add);
-            }
-            else {
-                html += currentValue;
-            }
-        }
-        else if (currentValue instanceof Binding) {
-            html += createAspectedHTML(new HTMLBindingDirective(currentValue), currentString, add);
-        }
-        else if ((definition = HTMLDirective.getForInstance(currentValue)) === void 0) {
-            html += createAspectedHTML(new HTMLBindingDirective(oneTime(() => currentValue)), currentString, add);
-        }
-        else {
-            if (definition.aspected) {
-                html += createAspectedHTML(currentValue, currentString, add);
-            }
-            else {
-                html += currentValue.createHTML(add);
-            }
-        }
+    if (Array.isArray(strings) && Array.isArray(strings.raw)) {
+        return ViewTemplate.create(strings, values);
     }
-    return new ViewTemplate(html + strings[strings.length - 1], factories);
+    throw FAST.error(1206 /* Message.directCallToHTMLTagNotAllowed */);
 }
 
 /**
@@ -2725,7 +3050,7 @@ class RefDirective extends StatelessAttachedAttributeDirective {
      * @param controller - The view controller that manages the lifecycle of this behavior.
      */
     bind(controller) {
-        controller.source[this.options] = controller.targets[this.nodeId];
+        controller.source[this.options] = controller.targets[this.targetNodeId];
     }
 }
 HTMLDirective.define(RefDirective);
@@ -2799,7 +3124,7 @@ class RepeatBehavior {
      * @param controller - The view controller that manages the lifecycle of this behavior.
      */
     bind(controller) {
-        this.location = controller.targets[this.directive.nodeId];
+        this.location = controller.targets[this.directive.targetNodeId];
         this.controller = controller;
         this.items = this.itemsBindingObserver.bind(controller);
         this.template = this.templateBindingObserver.bind(controller);
@@ -2979,10 +3304,6 @@ class RepeatDirective {
         this.dataBinding = dataBinding;
         this.templateBinding = templateBinding;
         this.options = options;
-        /**
-         * The unique id of the factory.
-         */
-        this.id = nextId();
         ArrayObserver.enable();
     }
     /**
@@ -3031,9 +3352,15 @@ const elements = (selector) => selector
  * Internally used by the SlottedDirective and the ChildrenDirective.
  */
 class NodeObservationDirective extends StatelessAttachedAttributeDirective {
-    constructor() {
-        super(...arguments);
-        this.sourceProperty = `${this.id}-s`;
+    /**
+     * The unique id of the factory.
+     */
+    get id() {
+        return this._id;
+    }
+    set id(value) {
+        this._id = value;
+        this._controllerProperty = `${value}-c`;
     }
     /**
      * Bind this behavior to the source.
@@ -3042,8 +3369,8 @@ class NodeObservationDirective extends StatelessAttachedAttributeDirective {
      * @param targets - The targets that behaviors in a view can attach to.
      */
     bind(controller) {
-        const target = controller.targets[this.nodeId];
-        target[this.sourceProperty] = controller.source;
+        const target = controller.targets[this.targetNodeId];
+        target[this._controllerProperty] = controller;
         this.updateTarget(controller.source, this.computeNodes(target));
         this.observe(target);
         controller.onUnbind(this);
@@ -3055,10 +3382,10 @@ class NodeObservationDirective extends StatelessAttachedAttributeDirective {
      * @param targets - The targets that behaviors in a view can attach to.
      */
     unbind(controller) {
-        const target = controller.targets[this.nodeId];
+        const target = controller.targets[this.targetNodeId];
         this.updateTarget(controller.source, emptyArray);
         this.disconnect(target);
-        target[this.sourceProperty] = null;
+        target[this._controllerProperty] = null;
     }
     /**
      * Gets the data source for the target.
@@ -3066,7 +3393,7 @@ class NodeObservationDirective extends StatelessAttachedAttributeDirective {
      * @returns The source.
      */
     getSource(target) {
-        return target[this.sourceProperty];
+        return target[this._controllerProperty].source;
     }
     /**
      * Updates the source property with the computed nodes.
@@ -3162,9 +3489,13 @@ class ChildrenDirective extends NodeObservationDirective {
      * @param target - The target to observe.
      */
     observe(target) {
-        var _a;
-        const observer = (_a = target[this.observerProperty]) !== null && _a !== void 0 ? _a : (target[this.observerProperty] = new MutationObserver(this.handleEvent));
-        observer.target = target;
+        let observer = target[this.observerProperty];
+        if (!observer) {
+            observer = new MutationObserver(this.handleEvent);
+            observer.toJSON = noop;
+            observer.target = target;
+            target[this.observerProperty] = observer;
+        }
         observer.observe(target, this.options);
     }
     /**
@@ -3203,6 +3534,29 @@ function children(propertyOrOptions) {
     return new ChildrenDirective(propertyOrOptions);
 }
 
+/**
+ * A directive capable of injecting static HTML platform runtime protection.
+ * @public
+ */
+class DangerousHTMLDirective {
+    constructor(html) {
+        this.html = html;
+    }
+    createHTML() {
+        return this.html;
+    }
+}
+HTMLDirective.define(DangerousHTMLDirective);
+/**
+ * Injects static HTML without platform protection.
+ * @param html - The html to injection.
+ * @returns A DangerousHTMLDirective.
+ * @public
+ */
+function dangerousHTML(html) {
+    return new DangerousHTMLDirective(html);
+}
+
 const booleanMode = "boolean";
 const reflectMode = "reflect";
 /**
@@ -3556,6 +3910,11 @@ class ElementController extends PropertyChangeNotifier {
          * If `null` then the element is managing its own rendering.
          */
         this.view = null;
+        /**
+         * Opts out of JSON stringification.
+         * @internal
+         */
+        this.toJSON = noop;
         this.source = element;
         this.definition = definition;
         const shadowOptions = definition.shadowOptions;
@@ -4058,4 +4417,6 @@ function customElement(nameOrDef) {
     };
 }
 
-export { ArrayObserver, Aspect, AttributeConfiguration, AttributeDefinition, Binding, CSSDirective, ChildrenDirective, Compiler, DOM, ElementController, ElementStyles, ExecutionContext, FAST, FASTElement, FASTElementDefinition, HTMLBindingDirective, HTMLDirective, HTMLView, Markup, NodeObservationDirective, Observable, Parser, PropertyChangeNotifier, RefDirective, RepeatBehavior, RepeatDirective, SlottedDirective, SourceLifetime, Splice, SpliceStrategy, SpliceStrategySupport, StatelessAttachedAttributeDirective, SubscriberSet, Updates, ViewBehaviorOrchestrator, ViewTemplate, attr, bind, booleanConverter, children, createMetadataLocator, createTypeRegistry, css, cssDirective, cssPartial, customElement, elements, emptyArray, html, htmlDirective, lengthOf, listener, normalizeBinding, nullableNumberConverter, observable, oneTime, ref, repeat, slotted, volatile, when };
+DOM.setPolicy(DOMPolicy.create());
+
+export { ArrayObserver, AttributeConfiguration, AttributeDefinition, Binding, CSSDirective, ChildrenDirective, Compiler, DOM, DOMAspect, DangerousHTMLDirective, ElementController, ElementStyles, ExecutionContext, FAST, FASTElement, FASTElementDefinition, HTMLBindingDirective, HTMLDirective, HTMLView, Markup, NodeObservationDirective, Observable, Parser, PropertyChangeNotifier, RefDirective, RepeatBehavior, RepeatDirective, SlottedDirective, SourceLifetime, Splice, SpliceStrategy, SpliceStrategySupport, StatelessAttachedAttributeDirective, SubscriberSet, Updates, ViewTemplate, attr, bind, booleanConverter, children, createMetadataLocator, createTypeRegistry, css, cssDirective, cssPartial, customElement, dangerousHTML, elements, emptyArray, html, htmlDirective, lengthOf, listener, normalizeBinding, nullableNumberConverter, observable, oneTime, ref, repeat, slotted, volatile, when };