@brightspace-ui/core 1.214.0 → 1.218.0

package/components/button/button-mixin.js

@@ -108,7 +108,7 @@ export const ButtonMixin = superclass => class extends FocusVisiblePolyfillMixin
 	}
 
 	focus() {
-		const button = this.shadowRoot.querySelector('button');
+		const button = this.shadowRoot && this.shadowRoot.querySelector('button');
 		if (button) button.focus();
 	}
 

package/components/calendar/calendar.js

@@ -557,7 +557,7 @@ class Calendar extends LocalizeCoreElement(RtlMixin(LitElement)) {
 			await this.updateComplete;
 			this._focusDateAddFocus();
 		} else {
-			const button = this.shadowRoot.querySelector('d2l-button-icon');
+			const button = this.shadowRoot && this.shadowRoot.querySelector('d2l-button-icon');
 			if (button) button.focus();
 		}
 	}
@@ -582,7 +582,7 @@ class Calendar extends LocalizeCoreElement(RtlMixin(LitElement)) {
 
 	async _getDateElement(date) {
 		await this.updateComplete;
-		return this.shadowRoot.querySelector(`td[data-date="${date.getDate()}"][data-month="${date.getMonth()}"][data-year="${date.getFullYear()}"]`);
+		return this.shadowRoot && this.shadowRoot.querySelector(`td[data-date="${date.getDate()}"][data-month="${date.getMonth()}"][data-year="${date.getFullYear()}"]`);
 	}
 
 	_getInitialFocusDate() {
@@ -715,7 +715,7 @@ class Calendar extends LocalizeCoreElement(RtlMixin(LitElement)) {
 				if (!canUpdateFocusDate) this._focusDate = undefined;
 				if (this._focusDate) this._focusDateAddFocus();
 				else {
-					const buttons = this.shadowRoot.querySelectorAll('d2l-button-icon');
+					const buttons = this.shadowRoot && this.shadowRoot.querySelectorAll('d2l-button-icon');
 					if (buttons && buttons.length > 0) buttons[0].focus();
 				}
 				preventDefault = true;
@@ -742,7 +742,7 @@ class Calendar extends LocalizeCoreElement(RtlMixin(LitElement)) {
 				if (!canUpdateFocusDate) this._focusDate = undefined;
 				if (this._focusDate) this._focusDateAddFocus();
 				else {
-					const buttons = this.shadowRoot.querySelectorAll('d2l-button-icon');
+					const buttons = this.shadowRoot && this.shadowRoot.querySelectorAll('d2l-button-icon');
 					if (buttons && buttons.length > 1) buttons[1].focus();
 				}
 				preventDefault = true;
@@ -832,7 +832,7 @@ class Calendar extends LocalizeCoreElement(RtlMixin(LitElement)) {
 		}
 
 		await this.updateComplete; // for case of keyboard navigation where second month contains no enabled dates
-		if (this.shadowRoot.querySelector('.d2l-calendar-date:enabled')) {
+		if (this.shadowRoot && this.shadowRoot.querySelector('.d2l-calendar-date:enabled')) {
 			const validDates = this.shadowRoot.querySelectorAll('.d2l-calendar-date:enabled');
 			const focusDate = validDates[latestPossibleFocusDate ? (validDates.length - 1) : 0].parentNode;
 			const year = focusDate.getAttribute('data-year');

package/components/card/card-footer-link.js

@@ -149,11 +149,11 @@ class CardFooterLink extends RtlMixin(LitElement) {
 	}
 
 	_onBlur() {
-		this.shadowRoot.querySelector('d2l-count-badge-icon').forceFocusRing = false;
+		if (this.shadowRoot) this.shadowRoot.querySelector('d2l-count-badge-icon').forceFocusRing = false;
 	}
 
 	_onFocus() {
-		this.shadowRoot.querySelector('d2l-count-badge-icon').forceFocusRing = true;
+		if (this.shadowRoot) this.shadowRoot.querySelector('d2l-count-badge-icon').forceFocusRing = true;
 	}
 
 }

package/components/card/card.js

@@ -307,7 +307,7 @@ class Card extends RtlMixin(LitElement) {
 	}
 
 	focus() {
-		const elem = this.shadowRoot.querySelector('a');
+		const elem = this.shadowRoot && this.shadowRoot.querySelector('a');
 		if (!elem) return;
 		elem.focus();
 	}

package/components/count-badge/count-badge-mixin.js

@@ -7,7 +7,7 @@ import { LocalizeCoreElement } from '../../lang/localize-core-element.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
-import { styleMap } from 'lit-html/directives/style-map';
+import { styleMap } from 'lit-html/directives/style-map.js';
 
 export const CountBadgeMixin = superclass => class extends LocalizeCoreElement(SkeletonMixin(RtlMixin(superclass))) {
 

package/components/demo/code-view.js

@@ -36,7 +36,7 @@ class CodeView extends LitElement {
 			const path = `/node_modules/prismjs/components/prism-${language}.min.js`;
 			this._dependenciesPromise = import(path);
 		}
-		this._updateCode(this.shadowRoot.querySelector('slot'));
+		if (this.shadowRoot) this._updateCode(this.shadowRoot.querySelector('slot'));
 		super.attributeChangedCallback(name, oldval, newval);
 	}
 
@@ -52,11 +52,12 @@ class CodeView extends LitElement {
 	}
 
 	forceUpdate() {
-		this._updateCode(this.shadowRoot.querySelector('slot'));
+		if (this.shadowRoot) this._updateCode(this.shadowRoot.querySelector('slot'));
 	}
 
 	get _codeTemplate() {
-		return html`<pre class="language-${this.language}"><code class="language-${this.language}">${unsafeHTML(this._code)}</code></pre>`;
+		const code = this._code !== undefined ? unsafeHTML(this._code) : '';
+		return html`<pre class="language-${this.language}"><code class="language-${this.language}">${code}</code></pre>`;
 	}
 
 	_formatCode(text) {

package/components/demo/demo-snippet.js

@@ -105,18 +105,19 @@ class DemoSnippet extends LitElement {
 
 		changedProperties.forEach((_, prop) => {
 			if (prop === '_code') {
-				this.shadowRoot.querySelector('d2l-code-view').forceUpdate();
+				if (this.shadowRoot) this.shadowRoot.querySelector('d2l-code-view').forceUpdate();
 				this._updateHasSkeleton();
 			}
 		});
 	}
 
 	forceCodeUpdate() {
-		this._updateCode(this.shadowRoot.querySelector('slot:not([name="_demo"])'));
+		if (this.shadowRoot) this._updateCode(this.shadowRoot.querySelector('slot:not([name="_demo"])'));
 	}
 
 	_applyAttr(name, value, applyToShadowRoot) {
 		const query = this._isTemplate ? 'slot[name="_demo"]' : 'slot:not([name="_demo"])';
+		if (!this.shadowRoot) return;
 		const nodes = this.shadowRoot.querySelector(query).assignedNodes();
 		if (nodes.length === 0) return;
 		const doApply = (nodes, isRoot) => {
@@ -191,6 +192,7 @@ class DemoSnippet extends LitElement {
 	}
 
 	_removeImportedDemo() {
+		if (!this.shadowRoot) return;
 		const nodes = this.shadowRoot.querySelector('slot[name="_demo"]').assignedNodes();
 		for (let i = nodes.length - 1; i === 0; i--) {
 			nodes[i].parentNode.removeChild(nodes[i]);
@@ -231,6 +233,7 @@ class DemoSnippet extends LitElement {
 	_updateHasSkeleton() {
 
 		const query = this._isTemplate ? 'slot[name="_demo"]' : 'slot:not([name="_demo"])';
+		if (!this.shadowRoot) return;
 		const nodes = this.shadowRoot.querySelector(query).assignedNodes();
 
 		const doApply = (nodes) => {

package/components/dialog/dialog-confirm.js

@@ -81,6 +81,7 @@ class DialogConfirm extends DialogMixin(LitElement) {
 	}
 
 	_focusInitial() {
+		if (!this.shadowRoot) return;
 		const footer = this.shadowRoot.querySelector('.d2l-dialog-footer-slot');
 		const nodes = footer.assignedNodes();
 		for (let i = 0; i < nodes.length; i++) {

package/components/dialog/dialog-mixin.js

@@ -129,7 +129,7 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 
 	_addHandlers() {
 		window.addEventListener('resize', this._updateSize);
-		this.shadowRoot.querySelector('.d2l-dialog-content').addEventListener('scroll', this._updateOverflow);
+		if (this.shadowRoot) this.shadowRoot.querySelector('.d2l-dialog-content').addEventListener('scroll', this._updateOverflow);
 	}
 
 	_close(action) {
@@ -139,6 +139,7 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 		clearDismissible(this._dismissibleId);
 		this._dismissibleId = null;
 
+		if (!this.shadowRoot) return;
 		const dialog = this.shadowRoot.querySelector('.d2l-dialog-outer');
 
 		const doClose = () => {
@@ -161,6 +162,7 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 	}
 
 	_focusFirst() {
+		if (!this.shadowRoot) return;
 		const content = this.shadowRoot.querySelector('.d2l-dialog-content');
 		if (content) {
 			const firstFocusable = getNextFocusable(content);
@@ -187,6 +189,7 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 	}
 
 	_getHeight() {
+		if (!this.shadowRoot) return;
 
 		const availableHeight = this._ifrauContextInfo
 			? this._ifrauContextInfo.availableHeight - this._margin.top - this._margin.bottom
@@ -303,6 +306,7 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 		this._action = undefined;
 		this._addHandlers();
 
+		if (!this.shadowRoot) return;
 		const dialog = this.shadowRoot.querySelector('.d2l-dialog-outer');
 
 		const animPromise = new Promise((resolve) => {
@@ -357,7 +361,7 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 
 	_removeHandlers() {
 		window.removeEventListener('resize', this._updateSize);
-		this.shadowRoot.querySelector('.d2l-dialog-content').removeEventListener('scroll', this._updateOverflow);
+		if (this.shadowRoot) this.shadowRoot.querySelector('.d2l-dialog-content').removeEventListener('scroll', this._updateOverflow);
 	}
 
 	_render(inner, info, iframeTopOverride) {
@@ -423,6 +427,7 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 	}
 
 	_updateOverflow() {
+		if (!this.shadowRoot) return;
 		const content = this.shadowRoot.querySelector('.d2l-dialog-content');
 		this._overflowTop = (content.scrollTop > 0);
 		this._overflowBottom = (content.scrollHeight > content.scrollTop + content.clientHeight);

package/components/dropdown/dropdown-button-subtle.js

@@ -41,7 +41,7 @@ class DropdownButtonSubtle extends DropdownOpenerMixin(LitElement) {
 	 * @return {HTMLElement}
 	 */
 	getOpenerElement() {
-		return this.shadowRoot.querySelector('d2l-button-subtle');
+		return this.shadowRoot && this.shadowRoot.querySelector('d2l-button-subtle');
 	}
 
 }

package/components/dropdown/dropdown-button.js

@@ -72,7 +72,7 @@ class DropdownButton extends DropdownOpenerMixin(RtlMixin(LitElement)) {
 	 * @return {HTMLElement}
 	 */
 	getOpenerElement() {
-		return this.shadowRoot.querySelector('d2l-button');
+		return this.shadowRoot && this.shadowRoot.querySelector('d2l-button');
 	}
 
 }

package/components/dropdown/dropdown-content-mixin.js

@@ -338,7 +338,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 		};
 
 		if (!reduceMotion && this._useMobileStyling && this.mobileTray && isVisible(this)) {
-			this.shadowRoot.querySelector('.d2l-dropdown-content-width')
+			if (this.shadowRoot) this.shadowRoot.querySelector('.d2l-dropdown-content-width')
 				.addEventListener('animationend', hide, { once: true });
 			this._closing = true;
 			this._showBackdrop = false;
@@ -399,15 +399,15 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 	}
 
 	__getContentBottom() {
-		return this.shadowRoot.querySelector('.d2l-dropdown-content-bottom');
+		return this.shadowRoot && this.shadowRoot.querySelector('.d2l-dropdown-content-bottom');
 	}
 
 	__getContentContainer() {
-		return this.shadowRoot.querySelector('.d2l-dropdown-content-container');
+		return this.shadowRoot && this.shadowRoot.querySelector('.d2l-dropdown-content-container');
 	}
 
 	__getContentTop() {
-		return this.shadowRoot.querySelector('.d2l-dropdown-content-top');
+		return this.shadowRoot && this.shadowRoot.querySelector('.d2l-dropdown-content-top');
 	}
 
 	__getOpener() {
@@ -420,11 +420,11 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 	}
 
 	__getPositionContainer() {
-		return this.shadowRoot.querySelector('.d2l-dropdown-content-position');
+		return this.shadowRoot && this.shadowRoot.querySelector('.d2l-dropdown-content-position');
 	}
 
 	__getWidthContainer() {
-		return this.shadowRoot.querySelector('.d2l-dropdown-content-width');
+		return this.shadowRoot && this.shadowRoot.querySelector('.d2l-dropdown-content-width');
 	}
 
 	__handleFooterSlotChange(e) {

package/components/dropdown/dropdown-context-menu.js

@@ -55,7 +55,7 @@ class DropdownContextMenu extends DropdownOpenerMixin(VisibleOnAncestorMixin(Lit
 	 * @return {HTMLElement}
 	 */
 	getOpenerElement() {
-		return this.shadowRoot.querySelector('d2l-button-icon');
+		return this.shadowRoot && this.shadowRoot.querySelector('d2l-button-icon');
 	}
 
 }

package/components/dropdown/dropdown-menu.js

@@ -51,6 +51,7 @@ class DropdownMenu extends ThemeMixin(DropdownContentMixin(LitElement)) {
 	}
 
 	__getMenuElement() {
+		if (!this.shadowRoot) return undefined;
 		return this.shadowRoot.querySelector('.d2l-dropdown-content-slot')
 			.assignedNodes().filter(node => node.hasAttribute
 				&& (node.getAttribute('role') === 'menu' || node.getAttribute('role') === 'listbox'))[0];

package/components/dropdown/dropdown-more.js

@@ -55,7 +55,7 @@ class DropdownMore extends DropdownOpenerMixin(VisibleOnAncestorMixin(LitElement
 	 * @return {HTMLElement}
 	 */
 	getOpenerElement() {
-		return this.shadowRoot.querySelector('d2l-button-icon');
+		return this.shadowRoot && this.shadowRoot.querySelector('d2l-button-icon');
 	}
 
 }

package/components/dropdown/dropdown-opener-mixin.js

@@ -170,6 +170,7 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 	}
 
 	__getContentElement() {
+		if (!this.shadowRoot) return undefined;
 		return this.shadowRoot.querySelector('slot:not([name])').assignedNodes()
 			.filter(node => node.hasAttribute && node.hasAttribute('dropdown-content'))[0];
 	}

package/components/dropdown/dropdown-tabs.js

@@ -37,6 +37,7 @@ class DropdownTabs extends DropdownContentMixin(LitElement) {
 	}
 
 	_getTabsElement() {
+		if (!this.shadowRoot) return undefined;
 		return this.shadowRoot.querySelector('.d2l-dropdown-content-container > slot')
 			.assignedNodes()
 			.filter(node => node.hasAttribute && node.tagName === 'D2L-TABS')[0];

package/components/dropdown/dropdown.js

@@ -21,6 +21,7 @@ class Dropdown extends DropdownOpenerMixin(LitElement) {
 	 * @return {HTMLElement}
 	 */
 	getOpenerElement() {
+		if (!this.shadowRoot) return undefined;
 		return this.shadowRoot.querySelector('slot')
 			.assignedNodes()
 			.filter(node => node.classList && node.classList.contains('d2l-dropdown-opener'))[0];

package/components/expand-collapse/expand-collapse-content.js

@@ -117,8 +117,8 @@ class ExpandCollapseContent extends LitElement {
 				await new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r)));
 				if (this._state === states.PREEXPANDING) {
 					this._state = states.EXPANDING;
-					const content = this.shadowRoot.querySelector('.d2l-expand-collapse-content-inner');
-					this._height = `${content.scrollHeight}px`;
+					const content = this.shadowRoot && this.shadowRoot.querySelector('.d2l-expand-collapse-content-inner');
+					if (content) this._height = `${content.scrollHeight}px`;
 				}
 			}
 		} else {
@@ -134,8 +134,8 @@ class ExpandCollapseContent extends LitElement {
 				this._eventPromiseResolve();
 			} else {
 				this._state = states.PRECOLLAPSING;
-				const content = this.shadowRoot.querySelector('.d2l-expand-collapse-content-inner');
-				this._height = `${content.scrollHeight}px`;
+				const content = this.shadowRoot && this.shadowRoot.querySelector('.d2l-expand-collapse-content-inner');
+				if (content) this._height = `${content.scrollHeight}px`;
 				await this.updateComplete;
 				await new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r)));
 				if (this._state === states.PRECOLLAPSING) {

package/components/filter/README.md

@@ -189,6 +189,7 @@ Set dimension on mobile:
 | `select-all` | Boolean | Whether to show a select all checkbox and selection summary for this dimension  |
 | `selection-single` | Boolean | Whether only one value can be selected at a time for this dimension  |
 | `text` | String, required | Text for the dimension in the menu |
+| `value-only-active-filter-text` | Boolean | Whether to hide the dimension in the text sent to active filter subscribers |
 <!-- docs: end hidden content -->
 
 ## Filter Dimension: Set Value [d2l-filter-dimension-set-value]

package/components/filter/filter-dimension-set.js

@@ -38,7 +38,12 @@ class FilterDimensionSet extends LitElement {
 			 * REQUIRED: The text that is displayed for the dimension title
 			 * @type {string}
 			 */
-			text: { type: String }
+			text: { type: String },
+			/**
+			 * Whether to hide the dimension in the text sent to active filter subscribers
+			 * @type {boolean}
+			 */
+			valueOnlyActiveFilterText: { type: Boolean, attribute: 'value-only-active-filter-text' }
 		};
 	}
 
@@ -49,6 +54,7 @@ class FilterDimensionSet extends LitElement {
 		this.selectAll = false;
 		this.selectionSingle = false;
 		this.text = '';
+		this.valueOnlyActiveFilterText = false;
 		this._slot = null;
 	}
 

package/components/filter/filter.js

@@ -23,6 +23,7 @@ import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../lang/localize-core-element.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';
+import { SubscriberRegistryController } from '../../controllers/subscriber/subscriberControllers.js';
 
 const ARROWLEFT_KEY_CODE = 37;
 const ESCAPE_KEY_CODE = 27;
@@ -143,6 +144,22 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
 		this._dimensions = [];
 		this._openedDimensions = [];
 		this._totalAppliedCount = 0;
+
+		this._activeFilters = null;
+		this._activeFiltersSubscribers = new SubscriberRegistryController(this,
+			{ onSubscribe: this._updateActiveFiltersSubscriber.bind(this), updateSubscribers: this._updateActiveFiltersSubscribers.bind(this) },
+			{}
+		);
+	}
+
+	connectedCallback() {
+		super.connectedCallback();
+		this._activeFiltersSubscribers.hostConnected();
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._activeFiltersSubscribers.hostDisconnected();
 	}
 
 	firstUpdated(changedProperties) {
@@ -213,10 +230,14 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
 	}
 
 	focus() {
-		const opener = this.shadowRoot.querySelector('d2l-dropdown-button-subtle');
+		const opener = this.shadowRoot && this.shadowRoot.querySelector('d2l-dropdown-button-subtle');
 		if (opener) opener.focus();
 	}
 
+	getSubscriberController() {
+		return this._activeFiltersSubscribers;
+	}
+
 	requestFilterClearAll() {
 		this._handleClearAll();
 	}
@@ -423,6 +444,8 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
 		}));
 		this._changeEventsToDispatch = new Map();
 		this._changeEventTimeout = null;
+
+		this._activeFiltersSubscribers.updateSubscribers();
 	}
 
 	_dispatchDimensionFirstOpenEvent(key) {
@@ -511,9 +534,11 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
 					dimension.appliedCount--;
 					this._totalAppliedCount--;
 				}
+				this._activeFiltersSubscribers.updateSubscribers();
 			} else if (prop === 'values') {
 				if (dimension.searchValue) shouldSearch = true;
 				shouldRecount = true;
+				this._activeFiltersSubscribers.updateSubscribers();
 			}
 		});
 
@@ -523,7 +548,7 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
 	}
 
 	_handleDimensionHide() {
-		this.shadowRoot.querySelector(`d2l-hierarchical-view[data-key="${this._activeDimensionKey}"]`).hide();
+		if (this.shadowRoot) this.shadowRoot.querySelector(`d2l-hierarchical-view[data-key="${this._activeDimensionKey}"]`).hide();
 	}
 
 	_handleDimensionHideKeyPress(e) {
@@ -538,8 +563,9 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
 	}
 
 	_handleDimensionShowComplete() {
-		const returnButton = this.shadowRoot.querySelector('d2l-button-icon[icon="tier1:chevron-left"]');
-		returnButton.focus();
+		const returnButton = this.shadowRoot
+			&& this.shadowRoot.querySelector('d2l-button-icon[icon="tier1:chevron-left"]');
+		if (returnButton) returnButton.focus();
 	}
 
 	_handleDimensionShowStart(e) {
@@ -608,6 +634,7 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
 					info.searchType = dimension.searchType;
 					info.selectionSingle = dimension.selectionSingle;
 					if (dimension.selectAll && !dimension.selectionSingle) info.selectAllIdPrefix = SET_DIMENSION_ID_PREFIX;
+					info.valueOnlyActiveFilterText = dimension.valueOnlyActiveFilterText;
 					const values = dimension._getValues();
 					info.values = values;
 					break;
@@ -618,6 +645,7 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
 		});
 
 		this._setFilterCounts();
+		this._activeFiltersSubscribers.updateSubscribers();
 	}
 
 	_isDimensionEmpty(dimension) {
@@ -716,6 +744,37 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
 		e.stopPropagation();
 	}
 
+	_updateActiveFilters() {
+		const activeFilters = [];
+
+		this._dimensions.forEach(dimension => {
+			switch (dimension.type) {
+				case 'd2l-filter-dimension-set': {
+					dimension.values.forEach(value => {
+						if (value.selected) {
+							const keyObject = { dimension: dimension.key, value: value.key };
+							const text = dimension.valueOnlyActiveFilterText ? value.text : `${dimension.text}: ${value.text}`;
+							activeFilters.push({ keyObject: keyObject, text: text });
+						}
+					});
+					break;
+				}
+			}
+		});
+
+		this._activeFilters = activeFilters;
+	}
+
+	_updateActiveFiltersSubscriber(subscriber) {
+		if (!this._activeFilters) this._updateActiveFilters();
+		subscriber.updateActiveFilters(this.id, this._activeFilters);
+	}
+
+	_updateActiveFiltersSubscribers(subscribers) {
+		this._updateActiveFilters();
+		subscribers.forEach(subscriber => subscriber.updateActiveFilters(this.id, this._activeFilters));
+	}
+
 }
 
 customElements.define('d2l-filter', Filter);

package/components/focus-trap/focus-trap.js

@@ -56,18 +56,19 @@ class FocusTrap extends LitElement {
 	}
 
 	focus() {
-		const focusable = this.shadowRoot.querySelector('.d2l-focus-trap-start');
+		const focusable = this.shadowRoot && this.shadowRoot.querySelector('.d2l-focus-trap-start');
 		if (focusable) focusable.focus();
 	}
 
 	_focusFirst() {
-		const focusable = getNextFocusable(this.shadowRoot.querySelector('.d2l-focus-trap-start'));
+		const focusable = this.shadowRoot &&
+			getNextFocusable(this.shadowRoot.querySelector('.d2l-focus-trap-start'));
 		if (focusable) forceFocusVisible(focusable);
 		this.dispatchEvent(new CustomEvent('d2l-focus-trap-enter', { bubbles: true, composed: true }));
 	}
 
 	_getContainer() {
-		return this.shadowRoot.querySelector('.d2l-focus-trap-start').parentNode;
+		return this.shadowRoot && this.shadowRoot.querySelector('.d2l-focus-trap-start').parentNode;
 	}
 
 	_handleBodyFocus(e) {
@@ -80,7 +81,7 @@ class FocusTrap extends LitElement {
 
 	_handleEndFocusIn(e) {
 		const container = this._getContainer();
-		if (isComposedAncestor(container, e.relatedTarget)) {
+		if (this.shadowRoot && isComposedAncestor(container, e.relatedTarget)) {
 			// user is exiting trap via forward tabbing...
 			const firstFocusable = getNextFocusable(this.shadowRoot.querySelector('.d2l-focus-trap-start'));
 			if (firstFocusable) {
@@ -96,7 +97,7 @@ class FocusTrap extends LitElement {
 
 	_handleStartFocusIn(e) {
 		const container = this._getContainer();
-		if (isComposedAncestor(container, e.relatedTarget)) {
+		if (this.shadowRoot && isComposedAncestor(container, e.relatedTarget)) {
 			// user is exiting trap via back tabbing...
 			const lastFocusable = getPreviousFocusable(this.shadowRoot.querySelector('.d2l-focus-trap-end'));
 			if (lastFocusable) {

package/components/form/demo/form-demo.js

@@ -86,7 +86,7 @@ class FormNestedDemo extends LitElement {
 	}
 
 	_submit() {
-		this.shadowRoot.querySelector('#root').submit();
+		if (this.shadowRoot) this.shadowRoot.querySelector('#root').submit();
 	}
 
 	_validatePassword(e) {

package/components/form/demo/form-dialog-demo.js

@@ -66,11 +66,11 @@ class FormDialogDemo extends LitElement {
 		e.stopPropagation();
 		// eslint-disable-next-line no-console
 		console.log(e.detail.formData);
-		this.shadowRoot.querySelector('#dialog').opened = false;
+		if (this.shadowRoot) this.shadowRoot.querySelector('#dialog').opened = false;
 	}
 
 	_onDialogSubmitClicked() {
-		this.shadowRoot.querySelector('#dialog-secondary-form').submit();
+		if (this.shadowRoot) this.shadowRoot.querySelector('#dialog-secondary-form').submit();
 	}
 
 	_onSubmit(e) {
@@ -79,11 +79,11 @@ class FormDialogDemo extends LitElement {
 	}
 
 	_onSubmitClicked() {
-		this.shadowRoot.querySelector('#dialog-main-form').submit();
+		if (this.shadowRoot) this.shadowRoot.querySelector('#dialog-main-form').submit();
 	}
 
 	_openDialog() {
-		this.shadowRoot.querySelector('#dialog').opened = true;
+		if (this.shadowRoot) this.shadowRoot.querySelector('#dialog').opened = true;
 	}
 
 	_validatePassword(e) {

package/components/form/demo/form-native-demo.js

@@ -69,7 +69,7 @@ class FormNativeDemo extends LitElement {
 	}
 
 	_onClick(e) {
-		this.shadowRoot.querySelector('d2l-form-native').requestSubmit(e.target);
+		if (this.shadowRoot) this.shadowRoot.querySelector('d2l-form-native').requestSubmit(e.target);
 	}
 
 	_validatePassword(e) {

package/components/form/form-element-mixin.js

@@ -136,9 +136,6 @@ export const FormElementMixin = superclass => class extends LocalizeCoreElement(
 		/** @ignore */
 		this.childErrors = new Map();
 		this._errors = [];
-
-		this.shadowRoot.addEventListener('d2l-validation-custom-connected', this._validationCustomConnected);
-		this.shadowRoot.addEventListener('d2l-form-element-errors-change', this._onFormElementErrorsChange);
 	}
 
 	/** @ignore */
@@ -160,6 +157,18 @@ export const FormElementMixin = superclass => class extends LocalizeCoreElement(
 		return this._validity;
 	}
 
+	connectedCallback() {
+		super.connectedCallback();
+		this.shadowRoot.addEventListener('d2l-validation-custom-connected', this._validationCustomConnected);
+		this.shadowRoot.addEventListener('d2l-form-element-errors-change', this._onFormElementErrorsChange);
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.shadowRoot.removeEventListener('d2l-validation-custom-connected', this._validationCustomConnected);
+		this.shadowRoot.removeEventListener('d2l-form-element-errors-change', this._onFormElementErrorsChange);
+	}
+
 	updated(changedProperties) {
 		if (changedProperties.has('_errors') || changedProperties.has('childErrors')) {
 			let errors = this._errors;