From d2bb3e407cb2668b5f873779297529a98eaa3dd1 Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Fri, 20 Oct 2023 10:51:59 -0500 Subject: [PATCH] update slotMutationController to allow multiple slot names --- core/src/utils/slot-mutation-controller.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/core/src/utils/slot-mutation-controller.ts b/core/src/utils/slot-mutation-controller.ts index 663b781a367..3827c28f9fa 100644 --- a/core/src/utils/slot-mutation-controller.ts +++ b/core/src/utils/slot-mutation-controller.ts @@ -6,18 +6,20 @@ import { raf } from '@utils/helpers'; * This is not needed for components using native slots in the Shadow DOM. * @internal * @param el The host element to observe - * @param slotName mutationCallback will fire when nodes on this slot change + * @param slotName mutationCallback will fire when nodes on these slot(s) change * @param mutationCallback The callback to fire whenever the slotted content changes */ export const createSlotMutationController = ( el: HTMLElement, - slotName: string, + slotName: string | string[], mutationCallback: () => void ): SlotMutationController => { let hostMutationObserver: MutationObserver | undefined; let slottedContentMutationObserver: MutationObserver | undefined; if (win !== undefined && 'MutationObserver' in win) { + const slots = Array.isArray(slotName) ? slotName : [slotName]; + hostMutationObserver = new MutationObserver((entries) => { for (const entry of entries) { for (const node of entry.addedNodes) { @@ -25,7 +27,7 @@ export const createSlotMutationController = ( * Check to see if the added node * is our slotted content. */ - if (node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).slot === slotName) { + if (node.nodeType === Node.ELEMENT_NODE && slots.includes((node as HTMLElement).slot)) { /** * If so, we want to watch the slotted * content itself for changes. This lets us