fix: support multiple ChildrenDirective for the same element (#6744)

* fixes a bug where ChildrenDirective could not be used multiple times for the same element

* Change files

* remove unused import

---------

Co-authored-by: nicholasrice <nicholasrice@users.noreply.github.com>

change/@microsoft-fast-element-34020ef5-64b7-45bf-80d1-d8e1f4db59cd.json

@@ -0,0 +1,7 @@
+{
+    "type": "prerelease",
+    "comment": "fixes a bug where ChildrenDirective could not be used multiple times for the same element",
+    "packageName": "@microsoft/fast-element",
+    "email": "nicholasrice@users.noreply.github.com",
+    "dependentChangeType": "prerelease"
+}

packages/web-components/fast-element/src/templating/children.spec.ts

@@ -227,5 +227,46 @@ describe("The children", () => {
 
             view.unbind();
         });
+
+
+        it("supports multiple directives for the same element", async () => {
+            const { host, targets, nodeId } = createDOM("foo-bar");
+            class MultipleDirectivesModel {
+                @observable
+                elements: Element[] = [];
+                @observable
+                text: Text[] = [];
+            }
+            const elementsDirective = new ChildrenDirective({
+                property: "elements",
+                filter: elements(),
+            });
+
+            const textDirective = new ChildrenDirective({
+                property: "text",
+                filter: (value) => value.nodeType === Node.TEXT_NODE,
+            });
+            elementsDirective.targetNodeId = nodeId;
+            textDirective.targetNodeId = nodeId;
+            const model = new MultipleDirectivesModel();
+            const controller = Fake.viewController(targets, elementsDirective, textDirective);
+
+            controller.bind(model);
+
+            elementsDirective.bind(controller);
+            textDirective.bind(controller);
+            const element = document.createElement("div");
+            const text = document.createTextNode("text");
+
+            host.appendChild(element);
+            host.appendChild(text)
+
+            await Updates.next();
+
+            expect(model.elements.includes(element)).to.equal(true);
+            expect(model.elements.includes(text as any)).to.equal(false);
+            expect(model.text.includes(text)).to.equal(true);
+            expect(model.text.includes(element as any)).to.equal(false);
+        });
     });
 });

packages/web-components/fast-element/src/templating/children.ts

@@ -45,7 +45,7 @@ export type ChildrenDirectiveOptions<T = any> =
 export class ChildrenDirective extends NodeObservationDirective<
     ChildrenDirectiveOptions
 > {
-    private observerProperty = `${this.id}-o`;
+    private observerProperty = Symbol();
 
     /**
      * Creates an instance of ChildrenDirective.