@microsoft/fast-element 2.9.0 → 2.9.2

package/dist/dts/styles/css-binding-directive.d.ts

@@ -4,7 +4,7 @@ import type { ExpressionObserver } from "../observation/observable.js";
 import { AddBehavior, CSSDirective } from "./css-directive.js";
 import type { ComposableStyles } from "./element-styles.js";
 import type { HostBehavior, HostController } from "./host.js";
-declare type CSSBindingEntry = {
+type CSSBindingEntry = {
     observer: ExpressionObserver;
     controller: HostController;
 };

package/dist/dts/styles/css-directive.d.ts

@@ -5,7 +5,7 @@ import type { ComposableStyles } from "./element-styles.js";
  * Used to add behaviors when constructing styles.
  * @public
  */
-export declare type AddBehavior = (behavior: HostBehavior<HTMLElement>) => void;
+export type AddBehavior = (behavior: HostBehavior<HTMLElement>) => void;
 /**
  * Directive for use in {@link css}.
  *

package/dist/dts/styles/css.d.ts

@@ -6,7 +6,7 @@ import { ComposableStyles, ElementStyles } from "./element-styles.js";
  * Represents the types of values that can be interpolated into a template.
  * @public
  */
-export declare type CSSValue<TSource, TParent = any> = Expression<TSource, any, TParent> | Binding<TSource, any, TParent> | ComposableStyles | CSSDirective;
+export type CSSValue<TSource, TParent = any> = Expression<TSource, any, TParent> | Binding<TSource, any, TParent> | ComposableStyles | CSSDirective;
 /**
  * Transforms a template literal string into styles.
  * @param strings - The string fragments that are interpolated with the values.
@@ -16,7 +16,7 @@ export declare type CSSValue<TSource, TParent = any> = Expression<TSource, any,
  * Use the .partial method to create partial CSS fragments.
  * @public
  */
-export declare type CSSTemplateTag = (<TSource = any, TParent = any>(strings: TemplateStringsArray, ...values: CSSValue<TSource, TParent>[]) => ElementStyles) & {
+export type CSSTemplateTag = (<TSource = any, TParent = any>(strings: TemplateStringsArray, ...values: CSSValue<TSource, TParent>[]) => ElementStyles) & {
     /**
      * Transforms a template literal string into partial CSS.
      * @param strings - The string fragments that are interpolated with the values.

package/dist/dts/styles/element-styles.d.ts

@@ -4,12 +4,12 @@ import type { HostBehavior } from "./host.js";
  * Represents styles that can be composed into the ShadowDOM of a custom element.
  * @public
  */
-export declare type ComposableStyles = string | ElementStyles | CSSStyleSheet;
+export type ComposableStyles = string | ElementStyles | CSSStyleSheet;
 /**
  * A type that instantiates a StyleStrategy.
  * @public
  */
-export declare type ConstructibleStyleStrategy = {
+export type ConstructibleStyleStrategy = {
     /**
      * Creates an instance of the strategy.
      * @param styles - The styles to initialize the strategy with.

package/dist/dts/templating/children.d.ts

@@ -25,7 +25,7 @@ export interface SubtreeDirectiveOptions<T = any> extends NodeBehaviorOptions<T>
  * The options used to configure child/subtree node observation.
  * @public
  */
-export declare type ChildrenDirectiveOptions<T = any> = ChildListDirectiveOptions<T> | SubtreeDirectiveOptions<T>;
+export type ChildrenDirectiveOptions<T = any> = ChildListDirectiveOptions<T> | SubtreeDirectiveOptions<T>;
 /**
  * The runtime behavior for child node observation.
  * @public

package/dist/dts/templating/compiler.d.ts

@@ -6,7 +6,7 @@ import type { HTMLTemplateCompilationResult as TemplateCompilationResult } from
  * by the html template function into a result that can instantiate views.
  * @public
  */
-export declare type CompilationStrategy = (
+export type CompilationStrategy = (
 /**
  * The preprocessed HTML string or template to compile.
  */

package/dist/dts/templating/html-directive.d.ts

@@ -6,7 +6,7 @@ import type { ExpressionController } from "../observation/observable.js";
  * The target nodes available to a behavior.
  * @public
  */
-export declare type ViewBehaviorTargets = {
+export type ViewBehaviorTargets = {
     [id: string]: Node;
 };
 /**
@@ -61,12 +61,12 @@ export interface ViewBehaviorFactory {
  * Represents a ViewBehaviorFactory after the compilation process has completed.
  * @public
  */
-export declare type CompiledViewBehaviorFactory = Required<ViewBehaviorFactory>;
+export type CompiledViewBehaviorFactory = Required<ViewBehaviorFactory>;
 /**
  * Used to add behavior factories when constructing templates.
  * @public
  */
-export declare type AddViewBehaviorFactory = (factory: ViewBehaviorFactory) => string;
+export type AddViewBehaviorFactory = (factory: ViewBehaviorFactory) => string;
 /**
  * Instructs the template engine to apply behavior to a node.
  * @public

package/dist/dts/templating/node-observation.d.ts

@@ -22,7 +22,7 @@ export interface NodeBehaviorOptions<T = any> {
  *
  * @public
  */
-export declare type ElementsFilter = (value: Node, index?: number, array?: Node[]) => boolean;
+export type ElementsFilter = (value: Node, index?: number, array?: Node[]) => boolean;
 /**
  * Creates a function that can be used to filter a Node array, selecting only elements.
  * @param selector - An optional selector to restrict the filter to.

package/dist/dts/templating/render.d.ts

@@ -95,7 +95,7 @@ export interface RenderInstruction {
  * Render options that are common to all configurations.
  * @public
  */
-export declare type CommonRenderOptions = {
+export type CommonRenderOptions = {
     /**
      * The type this instruction is associated with.
      */
@@ -109,7 +109,7 @@ export declare type CommonRenderOptions = {
  * Render options used to specify a template.
  * @public
  */
-export declare type TemplateRenderOptions = CommonRenderOptions & {
+export type TemplateRenderOptions = CommonRenderOptions & {
     /**
      * The template to use when rendering.
      */
@@ -119,7 +119,7 @@ export declare type TemplateRenderOptions = CommonRenderOptions & {
  * Render options that are common to all element render instructions.
  * @public
  */
-export declare type BaseElementRenderOptions<TSource = any, TParent = any> = CommonRenderOptions & {
+export type BaseElementRenderOptions<TSource = any, TParent = any> = CommonRenderOptions & {
     /**
      * Attributes to use when creating the element template.
      * @remarks
@@ -149,7 +149,7 @@ export declare type BaseElementRenderOptions<TSource = any, TParent = any> = Com
  * Render options for directly creating an element with {@link RenderInstruction.createElementTemplate}
  * @public
  */
-export declare type ElementCreateOptions<TSource = any, TParent = any> = Omit<BaseElementRenderOptions, "type" | "name"> & {
+export type ElementCreateOptions<TSource = any, TParent = any> = Omit<BaseElementRenderOptions, "type" | "name"> & {
     /**
      * Directives to use when creating the element template. These directives are applied directly to the specified tag.
      *
@@ -162,7 +162,7 @@ export declare type ElementCreateOptions<TSource = any, TParent = any> = Omit<Ba
  * Render options used to specify an element.
  * @public
  */
-export declare type ElementConstructorRenderOptions<TSource = any, TParent = any> = BaseElementRenderOptions<TSource, TParent> & {
+export type ElementConstructorRenderOptions<TSource = any, TParent = any> = BaseElementRenderOptions<TSource, TParent> & {
     /**
      * The element to use when rendering.
      */
@@ -172,7 +172,7 @@ export declare type ElementConstructorRenderOptions<TSource = any, TParent = any
  * Render options use to specify an element by tag name.
  * @public
  */
-export declare type TagNameRenderOptions<TSource = any, TParent = any> = BaseElementRenderOptions<TSource, TParent> & {
+export type TagNameRenderOptions<TSource = any, TParent = any> = BaseElementRenderOptions<TSource, TParent> & {
     /**
      * The tag name to use when rendering.
      */

package/dist/dts/templating/template.d.ts

@@ -65,7 +65,7 @@ export interface HTMLTemplateCompilationResult<TSource = any, TParent = any> {
  * Represents the types of values that can be interpolated into a template.
  * @public
  */
-export declare type TemplateValue<TSource, TParent = any> = Expression<TSource, any, TParent> | Binding<TSource, any, TParent> | HTMLDirective | CaptureType<TSource, TParent>;
+export type TemplateValue<TSource, TParent = any> = Expression<TSource, any, TParent> | Binding<TSource, any, TParent> | HTMLDirective | CaptureType<TSource, TParent>;
 /**
  * Inlines a template into another template.
  * @public
@@ -165,7 +165,7 @@ export declare class ViewTemplate<TSource = any, TParent = any> implements Eleme
  * other template instances, and Directive instances.
  * @public
  */
-export declare type HTMLTemplateTag = (<TSource = any, TParent = any>(strings: TemplateStringsArray, ...values: TemplateValue<TSource, TParent>[]) => ViewTemplate<TSource, TParent>) & {
+export type HTMLTemplateTag = (<TSource = any, TParent = any>(strings: TemplateStringsArray, ...values: TemplateValue<TSource, TParent>[]) => ViewTemplate<TSource, TParent>) & {
     /**
      * Transforms a template literal string into partial HTML.
      * @param html - The HTML string fragment to interpolate.

package/dist/esm/components/element-controller.js

@@ -27,90 +27,6 @@ let elementControllerStrategy;
  * @public
  */
 export class ElementController extends PropertyChangeNotifier {
-    /**
-     * Creates a Controller to control the specified element.
-     * @param element - The element to be controlled by this controller.
-     * @param definition - The element definition metadata that instructs this
-     * controller in how to handle rendering and other platform integrations.
-     * @internal
-     */
-    constructor(element, definition) {
-        super(element);
-        /**
-         * A map of observable properties that were set on the element before upgrade.
-         */
-        this.boundObservables = null;
-        /**
-         * Indicates whether the controller needs to perform initial rendering.
-         */
-        this.needsInitialization = true;
-        /**
-         * Indicates whether the element has an existing shadow root (e.g. from declarative shadow DOM).
-         */
-        this.hasExistingShadowRoot = false;
-        /**
-         * The template used to render the component.
-         */
-        this._template = null;
-        /**
-         * The current lifecycle stage of the controller.
-         */
-        this.stage = 3 /* Stages.disconnected */;
-        /**
-         * A guard against connecting behaviors multiple times
-         * during connect in scenarios where a behavior adds
-         * another behavior during it's connectedCallback
-         */
-        this.guardBehaviorConnection = false;
-        /**
-         * The behaviors associated with the component.
-         */
-        this.behaviors = null;
-        /**
-         * Tracks whether behaviors are connected so that
-         * behaviors cant be connected multiple times
-         */
-        this.behaviorsConnected = false;
-        /**
-         * The main set of styles used for the component, independent of any
-         * dynamically added styles.
-         */
-        this._mainStyles = null;
-        /**
-         * This allows Observable.getNotifier(...) to return the Controller
-         * when the notifier for the Controller itself is being requested. The
-         * result is that the Observable system does not need to create a separate
-         * instance of Notifier for observables on the Controller. The component and
-         * the controller will now share the same notifier, removing one-object construct
-         * per web component instance.
-         */
-        this.$fastController = this;
-        /**
-         * The view associated with the custom element.
-         * @remarks
-         * If `null` then the element is managing its own rendering.
-         */
-        this.view = null;
-        this.source = element;
-        this.definition = definition;
-        this.shadowOptions = definition.shadowOptions;
-        // Capture any observable values that were set by the binding engine before
-        // the browser upgraded the element. Then delete the property since it will
-        // shadow the getter/setter that is required to make the observable operate.
-        // Later, in the connect callback, we'll re-apply the values.
-        const accessors = Observable.getAccessors(element);
-        if (accessors.length > 0) {
-            const boundObservables = (this.boundObservables = Object.create(null));
-            for (let i = 0, ii = accessors.length; i < ii; ++i) {
-                const propertyName = accessors[i].name;
-                const value = element[propertyName];
-                if (value !== void 0) {
-                    delete element[propertyName];
-                    boundObservables[propertyName] = value;
-                }
-            }
-        }
-    }
     /**
      * Indicates whether or not the custom element has been
      * connected to the document.
@@ -224,6 +140,90 @@ export class ElementController extends PropertyChangeNotifier {
             this.addStyles(value);
         }
     }
+    /**
+     * Creates a Controller to control the specified element.
+     * @param element - The element to be controlled by this controller.
+     * @param definition - The element definition metadata that instructs this
+     * controller in how to handle rendering and other platform integrations.
+     * @internal
+     */
+    constructor(element, definition) {
+        super(element);
+        /**
+         * A map of observable properties that were set on the element before upgrade.
+         */
+        this.boundObservables = null;
+        /**
+         * Indicates whether the controller needs to perform initial rendering.
+         */
+        this.needsInitialization = true;
+        /**
+         * Indicates whether the element has an existing shadow root (e.g. from declarative shadow DOM).
+         */
+        this.hasExistingShadowRoot = false;
+        /**
+         * The template used to render the component.
+         */
+        this._template = null;
+        /**
+         * The current lifecycle stage of the controller.
+         */
+        this.stage = 3 /* Stages.disconnected */;
+        /**
+         * A guard against connecting behaviors multiple times
+         * during connect in scenarios where a behavior adds
+         * another behavior during it's connectedCallback
+         */
+        this.guardBehaviorConnection = false;
+        /**
+         * The behaviors associated with the component.
+         */
+        this.behaviors = null;
+        /**
+         * Tracks whether behaviors are connected so that
+         * behaviors cant be connected multiple times
+         */
+        this.behaviorsConnected = false;
+        /**
+         * The main set of styles used for the component, independent of any
+         * dynamically added styles.
+         */
+        this._mainStyles = null;
+        /**
+         * This allows Observable.getNotifier(...) to return the Controller
+         * when the notifier for the Controller itself is being requested. The
+         * result is that the Observable system does not need to create a separate
+         * instance of Notifier for observables on the Controller. The component and
+         * the controller will now share the same notifier, removing one-object construct
+         * per web component instance.
+         */
+        this.$fastController = this;
+        /**
+         * The view associated with the custom element.
+         * @remarks
+         * If `null` then the element is managing its own rendering.
+         */
+        this.view = null;
+        this.source = element;
+        this.definition = definition;
+        this.shadowOptions = definition.shadowOptions;
+        // Capture any observable values that were set by the binding engine before
+        // the browser upgraded the element. Then delete the property since it will
+        // shadow the getter/setter that is required to make the observable operate.
+        // Later, in the connect callback, we'll re-apply the values.
+        const accessors = Observable.getAccessors(element);
+        if (accessors.length > 0) {
+            const boundObservables = (this.boundObservables = Object.create(null));
+            for (let i = 0, ii = accessors.length; i < ii; ++i) {
+                const propertyName = accessors[i].name;
+                const value = element[propertyName];
+                if (value !== void 0) {
+                    delete element[propertyName];
+                    boundObservables[propertyName] = value;
+                }
+            }
+        }
+    }
     /**
      * Registers an unbind handler with the controller.
      * @param behavior - An object to call when the controller unbinds.

package/dist/esm/components/fast-definitions.js

@@ -33,6 +33,12 @@ export const TemplateOptions = {
  * @public
  */
 export class FASTElementDefinition {
+    /**
+     * Indicates if this element has been defined in at least one registry.
+     */
+    get isDefined() {
+        return this.platformDefined;
+    }
     constructor(type, nameOrConfig = type.definition) {
         var _b;
         this.platformDefined = false;
@@ -75,14 +81,8 @@ export class FASTElementDefinition {
                 : Object.assign(Object.assign({}, defaultElementOptions), nameOrConfig.elementOptions);
         this.styles = ElementStyles.normalize(nameOrConfig.styles);
         fastElementRegistry.register(this);
-        Observable.defineProperty(FASTElementDefinition.isRegistered, this.name);
-        FASTElementDefinition.isRegistered[this.name] = this.type;
-    }
-    /**
-     * Indicates if this element has been defined in at least one registry.
-     */
-    get isDefined() {
-        return this.platformDefined;
+        Observable.defineProperty(_a.isRegistered, this.name);
+        _a.isRegistered[this.name] = this.type;
     }
     /**
      * Defines a custom element based on this definition.
@@ -108,10 +108,10 @@ export class FASTElementDefinition {
      */
     static compose(type, nameOrDef) {
         if (fastElementBaseTypes.has(type) || fastElementRegistry.getByType(type)) {
-            return new FASTElementDefinition(class extends type {
+            return new _a(class extends type {
             }, nameOrDef);
         }
-        return new FASTElementDefinition(type, nameOrDef);
+        return new _a(type, nameOrDef);
     }
     /**
      * Registers a FASTElement base type.
@@ -133,10 +133,10 @@ export class FASTElementDefinition {
     static composeAsync(type, nameOrDef) {
         return new Promise(resolve => {
             if (fastElementBaseTypes.has(type) || fastElementRegistry.getByType(type)) {
-                resolve(new FASTElementDefinition(class extends type {
+                resolve(new _a(class extends type {
                 }, nameOrDef));
             }
-            const definition = new FASTElementDefinition(type, nameOrDef);
+            const definition = new _a(type, nameOrDef);
             Observable.getNotifier(definition).subscribe({
                 handleChange: () => {
                     var _b, _c;
@@ -169,10 +169,10 @@ FASTElementDefinition.getForInstance = fastElementRegistry.getForInstance;
  */
 FASTElementDefinition.registerAsync = (name) => __awaiter(void 0, void 0, void 0, function* () {
     return new Promise(resolve => {
-        if (FASTElementDefinition.isRegistered[name]) {
-            resolve(FASTElementDefinition.isRegistered[name]);
+        if (_a.isRegistered[name]) {
+            resolve(_a.isRegistered[name]);
         }
-        Observable.getNotifier(FASTElementDefinition.isRegistered).subscribe({ handleChange: () => resolve(FASTElementDefinition.isRegistered[name]) }, name);
+        Observable.getNotifier(_a.isRegistered).subscribe({ handleChange: () => resolve(_a.isRegistered[name]) }, name);
     });
 });
 Observable.defineProperty(FASTElementDefinition.prototype, "template");

package/dist/esm/di/di.js

@@ -902,6 +902,18 @@ const factories = new Map();
  * @internal
  */
 export class ContainerImpl {
+    get parent() {
+        if (this._parent === void 0) {
+            this._parent = this.config.parentLocator(this.owner);
+        }
+        return this._parent;
+    }
+    get depth() {
+        return this.parent === null ? 0 : this.parent.depth + 1;
+    }
+    get responsibleForOwnerRequests() {
+        return this.config.responsibleForOwnerRequests;
+    }
     constructor(owner, config) {
         this.owner = owner;
         this.config = config;
@@ -935,18 +947,6 @@ export class ContainerImpl {
             }
         }
     }
-    get parent() {
-        if (this._parent === void 0) {
-            this._parent = this.config.parentLocator(this.owner);
-        }
-        return this._parent;
-    }
-    get depth() {
-        return this.parent === null ? 0 : this.parent.depth + 1;
-    }
-    get responsibleForOwnerRequests() {
-        return this.config.responsibleForOwnerRequests;
-    }
     handleContextRequests(enable) {
         this.isHandlingContextRequests = enable;
     }

package/dist/esm/hydration/target-builder.js

@@ -52,6 +52,7 @@ function isShadowRoot(node) {
 export function buildViewBindingTargets(firstNode, lastNode, factories) {
     const range = createRangeForNodes(firstNode, lastNode);
     const treeRoot = range.commonAncestorContainer;
+    const hydrationIndexOffset = getHydrationIndexOffset(factories);
     const walker = document.createTreeWalker(treeRoot, NodeFilter.SHOW_ELEMENT + NodeFilter.SHOW_COMMENT + NodeFilter.SHOW_TEXT, {
         acceptNode(node) {
             return range.comparePoint(node, 0) === 0
@@ -65,11 +66,11 @@ export function buildViewBindingTargets(firstNode, lastNode, factories) {
     while (node !== null) {
         switch (node.nodeType) {
             case Node.ELEMENT_NODE: {
-                targetElement(node, factories, targets);
+                targetElement(node, factories, targets, hydrationIndexOffset);
                 break;
             }
             case Node.COMMENT_NODE: {
-                targetComment(node, walker, factories, targets, boundaries);
+                targetComment(node, walker, factories, targets, boundaries, hydrationIndexOffset);
                 break;
             }
         }
@@ -78,21 +79,22 @@ export function buildViewBindingTargets(firstNode, lastNode, factories) {
     range.detach();
     return { targets, boundaries };
 }
-function targetElement(node, factories, targets) {
+function targetElement(node, factories, targets, hydrationIndexOffset) {
     var _a, _b;
     // Check for attributes and map any factories.
     const attrFactoryIds = (_b = (_a = HydrationMarkup.parseAttributeBinding(node)) !== null && _a !== void 0 ? _a : HydrationMarkup.parseEnumeratedAttributeBinding(node)) !== null && _b !== void 0 ? _b : HydrationMarkup.parseCompactAttributeBinding(node);
     if (attrFactoryIds !== null) {
         for (const id of attrFactoryIds) {
-            if (!factories[id]) {
+            const factory = factories[id + hydrationIndexOffset];
+            if (!factory) {
                 throw new HydrationTargetElementError(`HydrationView was unable to successfully target factory on ${node.nodeName} inside ${node.getRootNode().host.nodeName}. This likely indicates a template mismatch between SSR rendering and hydration.`, factories, node);
             }
-            targetFactory(factories[id], node, targets);
+            targetFactory(factory, node, targets);
         }
         node.removeAttribute(HydrationMarkup.attributeMarkerName);
     }
 }
-function targetComment(node, walker, factories, targets, boundaries) {
+function targetComment(node, walker, factories, targets, boundaries, hydrationIndexOffset) {
     if (HydrationMarkup.isElementBoundaryStartMarker(node)) {
         skipToElementBoundaryEndMarker(node, walker);
         return;
@@ -103,7 +105,7 @@ function targetComment(node, walker, factories, targets, boundaries) {
             return;
         }
         const [index, id] = parsed;
-        const factory = factories[index];
+        const factory = factories[index + hydrationIndexOffset];
         const nodes = [];
         let current = walker.nextSibling();
         node.data = "";
@@ -167,6 +169,18 @@ function skipToElementBoundaryEndMarker(node, walker) {
         current = walker.nextSibling();
     }
 }
+function getHydrationIndexOffset(factories) {
+    let offset = 0;
+    for (let i = 0, ii = factories.length; i < ii; ++i) {
+        if (factories[i].targetNodeId === "h") {
+            offset++;
+        }
+        else {
+            break;
+        }
+    }
+    return offset;
+}
 export function targetFactory(factory, node, targets) {
     if (factory.targetNodeId === undefined) {
         // Dev error, this shouldn't ever be thrown

package/dist/esm/observation/arrays.js

@@ -470,18 +470,6 @@ function setNonEnumerable(target, property, value, writable = true) {
     });
 }
 class DefaultArrayObserver extends SubscriberSet {
-    constructor(subject) {
-        super(subject);
-        this.oldCollection = void 0;
-        this.splices = void 0;
-        this.sorts = void 0;
-        this.needsQueue = true;
-        this._strategy = null;
-        this._lengthObserver = void 0;
-        this._sortObserver = void 0;
-        this.call = this.flush;
-        setNonEnumerable(subject, "$fastController", this);
-    }
     get strategy() {
         return this._strategy;
     }
@@ -522,6 +510,18 @@ class DefaultArrayObserver extends SubscriberSet {
         }
         return observer;
     }
+    constructor(subject) {
+        super(subject);
+        this.oldCollection = void 0;
+        this.splices = void 0;
+        this.sorts = void 0;
+        this.needsQueue = true;
+        this._strategy = null;
+        this._lengthObserver = void 0;
+        this._sortObserver = void 0;
+        this.call = this.flush;
+        setNonEnumerable(subject, "$fastController", this);
+    }
     subscribe(subscriber) {
         this.flush();
         super.subscribe(subscriber);

package/dist/esm/styles/element-styles.js

@@ -9,6 +9,15 @@ function reduceStyles(styles) {
  * @public
  */
 export class ElementStyles {
+    /**
+     * Gets the StyleStrategy associated with these element styles.
+     */
+    get strategy() {
+        if (this._strategy === null) {
+            this.withStrategy(DefaultStyleStrategy);
+        }
+        return this._strategy;
+    }
     /**
      * Creates an instance of ElementStyles.
      * @param styles - The styles that will be associated with elements.
@@ -21,15 +30,6 @@ export class ElementStyles {
             .map((x) => x instanceof ElementStyles ? x.behaviors : null)
             .reduce((prev, curr) => (curr === null ? prev : prev === null ? curr : prev.concat(curr)), null);
     }
-    /**
-     * Gets the StyleStrategy associated with these element styles.
-     */
-    get strategy() {
-        if (this._strategy === null) {
-            this.withStrategy(DefaultStyleStrategy);
-        }
-        return this._strategy;
-    }
     /** @internal */
     addStylesTo(target) {
         this.strategy.addStylesTo(target);

package/dist/esm/templating/repeat.js

@@ -348,6 +348,13 @@ export class RepeatBehavior {
  * @public
  */
 export class RepeatDirective {
+    /**
+     * Creates a placeholder string based on the directive's index within the template.
+     * @param index - The index of the directive within the template.
+     */
+    createHTML(add) {
+        return Markup.comment(add(this));
+    }
     /**
      * Creates an instance of RepeatDirective.
      * @param dataBinding - The binding that provides the array to render.
@@ -360,13 +367,6 @@ export class RepeatDirective {
         this.options = options;
         ArrayObserver.enable();
     }
-    /**
-     * Creates a placeholder string based on the directive's index within the template.
-     * @param index - The index of the directive within the template.
-     */
-    createHTML(add) {
-        return Markup.comment(add(this));
-    }
     /**
      * Creates a behavior for the provided target node.
      * @param target - The node instance to create the behavior for.