@brightspace-ui/core 1.215.0 → 1.216.0

package/components/inputs/input-date-range.js

@@ -163,8 +163,8 @@ class InputDateRange extends SkeletonMixin(FormElementMixin(RtlMixin(LocalizeCor
 	}
 
 	render() {
-		const startDateInput = this.shadowRoot.querySelector('.d2l-input-date-range-start');
-		const endDateInput = this.shadowRoot.querySelector('.d2l-input-date-range-end');
+		const startDateInput = this.shadowRoot && this.shadowRoot.querySelector('.d2l-input-date-range-start');
+		const endDateInput = this.shadowRoot && this.shadowRoot.querySelector('.d2l-input-date-range-end');
 		const tooltipStart = (this.validationError && !this.startOpened && !this.childErrors.has(startDateInput)) ? html`<d2l-tooltip align="start" announced for="${this._startInputId}" state="error">${this.validationError}</d2l-tooltip>` : null;
 		const tooltipEnd = (this.validationError && !this.endOpened && !this.childErrors.has(endDateInput)) ? html`<d2l-tooltip align="start" announced for="${this._endInputId}" state="error">${this.validationError}</d2l-tooltip>` : null;
 		return html`
@@ -252,11 +252,12 @@ class InputDateRange extends SkeletonMixin(FormElementMixin(RtlMixin(LocalizeCor
 	}
 
 	focus() {
-		const input = this.shadowRoot.querySelector('d2l-input-date');
+		const input = this.shadowRoot && this.shadowRoot.querySelector('d2l-input-date');
 		if (input) input.focus();
 	}
 
 	async validate() {
+		if (!this.shadowRoot) return;
 		const startDateInput = this.shadowRoot.querySelector('.d2l-input-date-range-start');
 		const endDateInput = this.shadowRoot.querySelector('.d2l-input-date-range-end');
 		const errors = await Promise.all([startDateInput.validate(), endDateInput.validate(), super.validate()]);

package/components/inputs/input-date-time-range-to.js

@@ -179,7 +179,7 @@ class InputDateTimeRangeTo extends SkeletonMixin(LocalizeCoreElement(LitElement)
 	}
 
 	_startObserving() {
-		if (!this._parentNode) return;
+		if (!this.shadowRoot || !this._parentNode) return;
 
 		const leftElem = this.shadowRoot.querySelector('.d2l-input-date-time-range-start-container');
 		this._leftElemResizeObserver = this._leftElemResizeObserver || new ResizeObserver(() => {

package/components/inputs/input-date-time-range.js

@@ -209,8 +209,8 @@ class InputDateTimeRange extends SkeletonMixin(FormElementMixin(RtlMixin(Localiz
 	}
 
 	render() {
-		const startDateTimeInput = this.shadowRoot.querySelector('.d2l-input-date-time-range-start');
-		const endDateTimeInput = this.shadowRoot.querySelector('.d2l-input-date-time-range-end');
+		const startDateTimeInput = this.shadowRoot && this.shadowRoot.querySelector('.d2l-input-date-time-range-start');
+		const endDateTimeInput = this.shadowRoot && this.shadowRoot.querySelector('.d2l-input-date-time-range-end');
 
 		const tooltipStart = (this.validationError && !this.startOpened && !this.childErrors.has(startDateTimeInput)) ? html`<d2l-tooltip align="start" announced for="${this._startInputId}" position="bottom" state="error">${this.validationError}</d2l-tooltip>` : null;
 		const tooltipEnd = (this.validationError && !this.endOpened && !this.childErrors.has(endDateTimeInput)) ? html`<d2l-tooltip align="start" announced for="${this._endInputId}" position="bottom" state="error">${this.validationError}</d2l-tooltip>` : null;
@@ -308,11 +308,12 @@ class InputDateTimeRange extends SkeletonMixin(FormElementMixin(RtlMixin(Localiz
 	}
 
 	focus() {
-		const input = this.shadowRoot.querySelector('d2l-input-date-time');
+		const input = this.shadowRoot && this.shadowRoot.querySelector('d2l-input-date-time');
 		if (input) input.focus();
 	}
 
 	async validate() {
+		if (!this.shadowRoot) return;
 		const startDateTimeInput = this.shadowRoot.querySelector('.d2l-input-date-time-range-start');
 		const endDateTimeInput = this.shadowRoot.querySelector('.d2l-input-date-time-range-end');
 		const errors = await Promise.all([startDateTimeInput.validate(), endDateTimeInput.validate(), super.validate()]);

package/components/inputs/input-date-time.js

@@ -296,11 +296,12 @@ class InputDateTime extends LabelledMixin(SkeletonMixin(FormElementMixin(Localiz
 	}
 
 	focus() {
-		const elem = this.shadowRoot.querySelector('d2l-input-date');
+		const elem = this.shadowRoot && this.shadowRoot.querySelector('d2l-input-date');
 		if (elem) elem.focus();
 	}
 
 	async validate() {
+		if (!this.shadowRoot) return;
 		const dateInput = this.shadowRoot.querySelector('d2l-input-date');
 		const timeInput = this.shadowRoot.querySelector('d2l-input-time');
 		const errors = await Promise.all([dateInput.validate(), timeInput.validate(), super.validate()]);
@@ -319,7 +320,7 @@ class InputDateTime extends LabelledMixin(SkeletonMixin(FormElementMixin(Localiz
 		if (!newDate) {
 			this.value = '';
 		} else {
-			const inputTime = this.shadowRoot.querySelector('d2l-input-time');
+			const inputTime = this.shadowRoot && this.shadowRoot.querySelector('d2l-input-time');
 			let time;
 			if (e.detail && e.detail.setToNow) time = _getFormattedDefaultTime('now');
 			else time = inputTime ? inputTime.value : _getFormattedDefaultTime(this.timeDefaultValue);
@@ -346,12 +347,12 @@ class InputDateTime extends LabelledMixin(SkeletonMixin(FormElementMixin(Localiz
 	}
 
 	_handleInputTimeBlur() {
-		const tooltip = this.shadowRoot.querySelector('d2l-tooltip');
+		const tooltip = this.shadowRoot && this.shadowRoot.querySelector('d2l-tooltip');
 		if (tooltip) tooltip.hide();
 	}
 
 	_handleInputTimeFocus() {
-		const tooltip = this.shadowRoot.querySelector('d2l-tooltip');
+		const tooltip = this.shadowRoot && this.shadowRoot.querySelector('d2l-tooltip');
 		if (tooltip) tooltip.show();
 	}
 
@@ -360,7 +361,7 @@ class InputDateTime extends LabelledMixin(SkeletonMixin(FormElementMixin(Localiz
 	}
 
 	async _handleTimeChange(e) {
-		const date = this.shadowRoot.querySelector('d2l-input-date').value;
+		const date = this.shadowRoot && this.shadowRoot.querySelector('d2l-input-date').value;
 		const time = e.target.value;
 		this.value = this.localized ? _formatLocalDateTimeInISO(date, time) : getUTCDateTimeFromLocalDateTime(date, time);
 		this._dispatchChangeEvent();

package/components/inputs/input-date.js

@@ -336,6 +336,7 @@ class InputDate extends LabelledMixin(SkeletonMixin(FormElementMixin(LocalizeCor
 	}
 
 	async validate() {
+		if (!this.shadowRoot) return;
 		const textInput = this.shadowRoot.querySelector('d2l-input-text');
 		const errors = await Promise.all([textInput.validate(), super.validate()]);
 		return [...errors[0], ...errors[1]];
@@ -407,6 +408,7 @@ class InputDate extends LabelledMixin(SkeletonMixin(FormElementMixin(LocalizeCor
 	}
 
 	_handleDropdownOpen() {
+		if (!this.shadowRoot) return;
 		const calendarOffset = this.shadowRoot.querySelector('d2l-calendar').getBoundingClientRect();
 		const fullCalendarVisible = calendarOffset.y + calendarOffset.height < window.innerHeight;
 		if (this._dropdown && !this._dropdown.openedAbove && !fullCalendarVisible) {
@@ -432,6 +434,7 @@ class InputDate extends LabelledMixin(SkeletonMixin(FormElementMixin(LocalizeCor
 	async _handleFirstDropdownOpen() {
 		this._dropdownFirstOpened = true;
 		await this.updateComplete;
+		if (!this.shadowRoot) return;
 		this._calendar = this.shadowRoot.querySelector('d2l-calendar');
 		this._dropdown = this.shadowRoot.querySelector('d2l-dropdown-content');
 		await this._calendar.updateComplete;

package/components/inputs/input-number.js

@@ -366,7 +366,7 @@ class InputNumber extends LabelledMixin(SkeletonMixin(FormElementMixin(LocalizeC
 	}
 
 	async focus() {
-		const elem = this.shadowRoot.querySelector('d2l-input-text');
+		const elem = this.shadowRoot && this.shadowRoot.querySelector('d2l-input-text');
 		if (elem) {
 			elem.focus();
 		} else {
@@ -376,6 +376,7 @@ class InputNumber extends LabelledMixin(SkeletonMixin(FormElementMixin(LocalizeC
 	}
 
 	async validate() {
+		if (!this.shadowRoot) return;
 		const inputTextElem = this.shadowRoot.querySelector('d2l-input-text');
 		await inputTextElem.updateComplete;
 		const childErrors = await inputTextElem.validate();

package/components/inputs/input-percent.js

@@ -132,11 +132,12 @@ class InputPercent extends LabelledMixin(SkeletonMixin(FormElementMixin(Localize
 	}
 
 	focus() {
-		const elem = this.shadowRoot.querySelector('d2l-input-number');
+		const elem = this.shadowRoot && this.shadowRoot.querySelector('d2l-input-number');
 		if (elem) elem.focus();
 	}
 
 	async validate() {
+		if (!this.shadowRoot) return;
 		const inputNumberElem = this.shadowRoot.querySelector('d2l-input-number');
 		await inputNumberElem.updateComplete;
 		const childErrors = await inputNumberElem.validate();

package/components/inputs/input-search.js

@@ -123,7 +123,7 @@ class InputSearch extends LocalizeCoreElement(RtlMixin(LitElement)) {
 	}
 
 	focus() {
-		const elem = this.shadowRoot.querySelector('d2l-input-text');
+		const elem = this.shadowRoot && this.shadowRoot.querySelector('d2l-input-text');
 		if (elem) elem.focus();
 	}
 
@@ -132,7 +132,7 @@ class InputSearch extends LocalizeCoreElement(RtlMixin(LitElement)) {
 		this._dispatchEvent();
 		if (!this.noClear && this.value.length > 0) {
 			this.updateComplete.then(() => {
-				this.shadowRoot.querySelector('d2l-button-icon').focus();
+				if (this.shadowRoot) this.shadowRoot.querySelector('d2l-button-icon').focus();
 			});
 		}
 	}
@@ -158,7 +158,7 @@ class InputSearch extends LocalizeCoreElement(RtlMixin(LitElement)) {
 			this._setLastSearchValue('');
 			this._dispatchEvent();
 		}
-		this.shadowRoot.querySelector('d2l-input-text').focus();
+		if (this.shadowRoot) this.shadowRoot.querySelector('d2l-input-text').focus();
 	}
 
 	_handleInput(e) {

package/components/inputs/input-text.js

@@ -271,13 +271,13 @@ class InputText extends LabelledMixin(FormElementMixin(SkeletonMixin(RtlMixin(Li
 
 	/** @ignore */
 	get selectionEnd() {
-		const elem = this.shadowRoot.querySelector('.d2l-input');
+		const elem = this.shadowRoot && this.shadowRoot.querySelector('.d2l-input');
 		return elem ? elem.selectionEnd : 0;
 	}
 
 	/** @ignore */
 	get selectionStart() {
-		const elem = this.shadowRoot.querySelector('.d2l-input');
+		const elem = this.shadowRoot && this.shadowRoot.querySelector('.d2l-input');
 		return elem ? elem.selectionStart : 0;
 	}
 
@@ -301,7 +301,7 @@ class InputText extends LabelledMixin(FormElementMixin(SkeletonMixin(RtlMixin(Li
 
 	/** @ignore */
 	get validity() {
-		const elem = this.shadowRoot.querySelector('.d2l-input');
+		const elem = this.shadowRoot && this.shadowRoot.querySelector('.d2l-input');
 		if (!elem.validity.valid) {
 			return elem.validity;
 		}
@@ -318,7 +318,7 @@ class InputText extends LabelledMixin(FormElementMixin(SkeletonMixin(RtlMixin(Li
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		if (this._intersectionObserver) this._intersectionObserver.disconnect();
-		const container = this.shadowRoot.querySelector('.d2l-input-text-container');
+		const container = this.shadowRoot && this.shadowRoot.querySelector('.d2l-input-text-container');
 		if (!container) return;
 		container.removeEventListener('blur', this._handleBlur, true);
 		container.removeEventListener('focus', this._handleFocus, true);
@@ -331,7 +331,7 @@ class InputText extends LabelledMixin(FormElementMixin(SkeletonMixin(RtlMixin(Li
 
 		this._setValue(this.value, true);
 
-		const container = this.shadowRoot.querySelector('.d2l-input-text-container');
+		const container = this.shadowRoot && this.shadowRoot.querySelector('.d2l-input-text-container');
 		if (!container) return;
 		container.addEventListener('blur', this._handleBlur, true);
 		container.addEventListener('focus', this._handleFocus, true);
@@ -464,7 +464,7 @@ class InputText extends LabelledMixin(FormElementMixin(SkeletonMixin(RtlMixin(Li
 	}
 
 	async focus() {
-		const elem = this.shadowRoot.querySelector('.d2l-input');
+		const elem = this.shadowRoot && this.shadowRoot.querySelector('.d2l-input');
 		if (elem) {
 			elem.focus();
 		} else {
@@ -572,7 +572,7 @@ class InputText extends LabelledMixin(FormElementMixin(SkeletonMixin(RtlMixin(Li
 		this._prevValue = (oldVal === undefined) ? '' : oldVal;
 		this._value = val;
 
-		const input = this.shadowRoot.querySelector('.d2l-input');
+		const input = this.shadowRoot && this.shadowRoot.querySelector('.d2l-input');
 		if (!input) return;
 
 		this.setValidity({ tooShort: this.minlength && this.value.length > 0 && this.value.length < this.minlength });
@@ -595,7 +595,7 @@ class InputText extends LabelledMixin(FormElementMixin(SkeletonMixin(RtlMixin(Li
 	_updateInputLayout() {
 
 		// defer until we're visible
-		if (!this._isIntersecting) return;
+		if (!this.shadowRoot || !this._isIntersecting) return;
 
 		const firstContainer = this.shadowRoot.querySelector('.d2l-input-inside-before');
 		const firstSlotHasNodes = firstContainer.querySelector('slot').assignedNodes({ flatten: true }).length > 0

package/components/inputs/input-textarea.js

@@ -165,7 +165,7 @@ class InputTextArea extends LabelledMixin(FormElementMixin(SkeletonMixin(RtlMixi
 	/** @ignore */
 	get textarea() {
 		// temporary until consumers are updated
-		return this.shadowRoot.querySelector('textarea');
+		return this.shadowRoot && this.shadowRoot.querySelector('textarea');
 	}
 
 	/** @ignore */
@@ -178,8 +178,8 @@ class InputTextArea extends LabelledMixin(FormElementMixin(SkeletonMixin(RtlMixi
 
 	/** @ignore */
 	get validity() {
-		const elem = this.shadowRoot.querySelector('textarea');
-		if (!elem.validity.valid) {
+		const elem = this.shadowRoot && this.shadowRoot.querySelector('textarea');
+		if (elem && !elem.validity.valid) {
 			return elem.validity;
 		}
 		return super.validity;
@@ -264,7 +264,7 @@ class InputTextArea extends LabelledMixin(FormElementMixin(SkeletonMixin(RtlMixi
 	}
 
 	async focus() {
-		const elem = this.shadowRoot.querySelector('textarea');
+		const elem = this.shadowRoot && this.shadowRoot.querySelector('textarea');
 		if (elem) {
 			elem.focus();
 		} else {
@@ -274,7 +274,7 @@ class InputTextArea extends LabelledMixin(FormElementMixin(SkeletonMixin(RtlMixi
 	}
 
 	async select() {
-		const elem = this.shadowRoot.querySelector('textarea');
+		const elem = this.shadowRoot && this.shadowRoot.querySelector('textarea');
 		if (elem) {
 			elem.select();
 		} else {

package/components/inputs/input-time-range.js

@@ -210,9 +210,8 @@ class InputTimeRange extends SkeletonMixin(FormElementMixin(RtlMixin(LocalizeCor
 		const startLabel = this.startLabel ? this.startLabel : this.localize('components.input-time-range.startTime');
 		const endLabel = this.endLabel ? this.endLabel : this.localize('components.input-time-range.endTime');
 
-		const startTimeInput = this.shadowRoot.querySelector('.d2l-input-time-range-start');
-		const endTimeInput = this.shadowRoot.querySelector('.d2l-input-time-range-end');
-
+		const startTimeInput = this.shadowRoot && this.shadowRoot.querySelector('.d2l-input-time-range-start');
+		const endTimeInput =  this.shadowRoot && this.shadowRoot.querySelector('.d2l-input-time-range-end');
 		/**
 		 * @type {'five'|'ten'|'fifteen'|'twenty'|'thirty'|'sixty'}
 		 */
@@ -304,11 +303,12 @@ class InputTimeRange extends SkeletonMixin(FormElementMixin(RtlMixin(LocalizeCor
 	}
 
 	focus() {
-		const input = this.shadowRoot.querySelector('d2l-input-time');
+		const input = this.shadowRoot && this.shadowRoot.querySelector('d2l-input-time');
 		if (input) input.focus();
 	}
 
 	async validate() {
+		if (!this.shadowRoot) return;
 		const startTimeInput = this.shadowRoot.querySelector('.d2l-input-time-range-start');
 		const endTimeInput = this.shadowRoot.querySelector('.d2l-input-time-range-end');
 		const errors = await Promise.all([startTimeInput.validate(), endTimeInput.validate(), super.validate()]);

package/components/inputs/input-time.js

@@ -350,7 +350,7 @@ class InputTime extends LabelledMixin(SkeletonMixin(FormElementMixin(LitElement)
 	}
 
 	focus() {
-		const elem = this.shadowRoot.querySelector('.d2l-input');
+		const elem = this.shadowRoot && this.shadowRoot.querySelector('.d2l-input');
 		if (elem) elem.focus();
 	}
 

package/components/link/link.js

@@ -118,7 +118,7 @@ class Link extends LitElement {
 	}
 
 	focus() {
-		const link = this.shadowRoot.querySelector('.d2l-link');
+		const link = this.shadowRoot && this.shadowRoot.querySelector('.d2l-link');
 		if (link) link.focus();
 	}
 }

package/components/list/demo/list-drag-and-drop.js

@@ -167,6 +167,7 @@ class ListDemoDragAndDrop extends LitElement {
 
 		if (e.detail.keyboardActive) {
 			requestAnimationFrame(() => {
+				if (!this.shadowRoot) return;
 				const newItem = this.shadowRoot.querySelector('d2l-list').getListItemByKey(sourceListItems[0].key);
 				newItem.activateDragHandle();
 			});

package/components/list/list-item-checkbox-mixin.js

@@ -119,7 +119,7 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(L
 		event.preventDefault();
 		if (this.disabled) return;
 		this.setSelected(!this.selected);
-		const checkbox = this.shadowRoot.querySelector(`#${this._checkboxId}`);
+		const checkbox = this.shadowRoot && this.shadowRoot.querySelector(`#${this._checkboxId}`);
 		if (checkbox) checkbox.focus();
 	}
 

package/components/list/list-item-drag-drop-mixin.js

@@ -360,7 +360,7 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 	}
 
 	activateDragHandle() {
-		this.shadowRoot.querySelector(`#${this._itemDragId}`).activateKeyboardMode();
+		if (this.shadowRoot) this.shadowRoot.querySelector(`#${this._itemDragId}`).activateKeyboardMode();
 	}
 
 	_annoucePositionChange(dragTargetKey, dropTargetKey, dropLocation) {
@@ -550,8 +550,10 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 			e.dataTransfer.setData('text/plain', `${this.dropText}`);
 		}
 
-		const nodeImage = this.shadowRoot.querySelector('.d2l-list-item-drag-image') || this;
-		e.dataTransfer.setDragImage(nodeImage, 50, 50);
+		if (this.shadowRoot) {
+			const nodeImage = this.shadowRoot.querySelector('.d2l-list-item-drag-image') || this;
+			e.dataTransfer.setDragImage(nodeImage, 50, 50);
+		}
 
 		const rootList = this._getRootList(this);
 
@@ -583,6 +585,7 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 	}
 
 	_onDragTargetClick(e) {
+		if (!this.shadowRoot) return;
 		if (this._keyboardActiveOnNextClick) {
 			this.shadowRoot.querySelector(`#${this._itemDragId}`).activateKeyboardMode();
 		} else {
@@ -691,7 +694,8 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 		const dropGrid = listItem.shadowRoot.querySelector('.d2l-list-item-drag-drop-grid');
 		if (dropGrid) dropGrid.dispatchEvent(createDragEvent('drop'));
 		// simulate dragend
-		this.shadowRoot.querySelector('.d2l-list-item-drag-area').dispatchEvent(createDragEvent('dragend'));
+		if (this.shadowRoot)
+			this.shadowRoot.querySelector('.d2l-list-item-drag-area').dispatchEvent(createDragEvent('dragend'));
 	}
 
 	/**
@@ -743,7 +747,8 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 		// simulate dragstart for touch and hold
 		this._touchTimeoutId = setTimeout(() => {
 			this._touchStarted = true;
-			this.shadowRoot.querySelector('.d2l-list-item-drag-area').dispatchEvent(createDragEvent('dragstart'));
+			if (this.shadowRoot)
+				this.shadowRoot.querySelector('.d2l-list-item-drag-area').dispatchEvent(createDragEvent('dragstart'));
 		}, touchHoldDuration);
 	}
 

package/components/list/list-item-generic-layout.js

@@ -171,7 +171,7 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 	}
 
 	_focusCellItem(num, itemNum) {
-		const cell = this.shadowRoot.querySelector(`[data-cell-num="${num}"]`);
+		const cell = this.shadowRoot && this.shadowRoot.querySelector(`[data-cell-num="${num}"]`);
 		if (!cell) return;
 
 		const firstFocusable = getFirstFocusableDescendant(cell);
@@ -197,7 +197,7 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 		let focusable = null;
 		let num = 1;
 		do {
-			cell = this.shadowRoot.querySelector(`[data-cell-num="${num++}"]`);
+			cell = this.shadowRoot && this.shadowRoot.querySelector(`[data-cell-num="${num++}"]`);
 			if (cell) {
 				focusable = getLastFocusableDescendant(cell) || focusable;
 			}
@@ -220,7 +220,7 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 		let focusable = null;
 
 		do {
-			cell = this.shadowRoot.querySelector(`[data-cell-num="${num}"]`);
+			cell = this.shadowRoot && this.shadowRoot.querySelector(`[data-cell-num="${num}"]`);
 			if (cell) {
 				focusable = forward ? getFirstFocusableDescendant(cell) : getLastFocusableDescendant(cell);
 			}
@@ -381,7 +381,8 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 	}
 
 	_getThisCell() {
-		return this.shadowRoot.querySelector(`.d2l-cell[data-cell-num="${this._cellNum}"]`);
+		return this.shadowRoot &&
+			this.shadowRoot.querySelector(`.d2l-cell[data-cell-num="${this._cellNum}"]`);
 	}
 
 	_onKeydown(event) {

package/components/list/list-item-mixin.js

@@ -303,6 +303,7 @@ export const ListItemMixin = superclass => class extends ListItemDragDropMixin(L
 	}
 
 	_getNestedList() {
+		if (!this.shadowRoot) return;
 		const nestedSlot = this.shadowRoot.querySelector('slot[name="nested"]');
 		let nestedNodes = nestedSlot.assignedNodes();
 		if (nestedNodes.length === 0) {

package/components/list/list.js

@@ -101,6 +101,7 @@ class List extends SelectionMixin(LitElement) {
 	}
 
 	getItems() {
+		if (!this.shadowRoot) return;
 		const slot = this.shadowRoot.querySelector('slot:not([name])');
 		if (!slot) return [];
 		return slot.assignedNodes({ flatten: true }).filter((node) => {
@@ -157,6 +158,7 @@ class List extends SelectionMixin(LitElement) {
 	_handleKeyDown(e) {
 		if (!this.grid || this.slot === 'nested' || e.keyCode !== keyCodes.TAB) return;
 		e.preventDefault();
+		if (!this.shadowRoot) return;
 		const focusable = (e.shiftKey ? getPreviousFocusable(this.shadowRoot.querySelector('slot:not([name])'))
 			: getNextFocusable(this, false, true, true));
 		if (focusable) focusable.focus();

package/components/menu/demo/custom-view.js

@@ -48,7 +48,7 @@ class CustomView extends HierarchicalViewMixin(LitElement) {
 	}
 
 	focus() {
-		this.shadowRoot.querySelector('.d2l-custom-view-back-container > a').focus();
+		if (this.shadowRoot) this.shadowRoot.querySelector('.d2l-custom-view-back-container > a').focus();
 	}
 
 	_handleHide(e) {

package/components/menu/menu-item-link.js

@@ -84,7 +84,7 @@ class MenuItemLink extends MenuItemMixin(LitElement) {
 	}
 
 	_onClick() {
-		this.shadowRoot.querySelector('a').dispatchEvent(new CustomEvent('click'));
+		if (this.shadowRoot) this.shadowRoot.querySelector('a').dispatchEvent(new CustomEvent('click'));
 	}
 
 	_onKeyDown(e) {

package/components/menu/menu-item-mixin.js

@@ -109,7 +109,7 @@ export const MenuItemMixin = superclass => class extends FocusVisiblePolyfillMix
 	}
 
 	__initializeItem() {
-		const slot = this.shadowRoot.querySelector('slot:not([name])');
+		const slot = this.shadowRoot && this.shadowRoot.querySelector('slot:not([name])');
 		if (!slot) {
 			return;
 		}

package/components/menu/menu.js

@@ -221,11 +221,11 @@ class Menu extends ThemeMixin(HierarchicalViewMixin(FocusVisiblePolyfillMixin(Li
 	}
 
 	_getMenuItemReturn() {
-		return this.shadowRoot.querySelector('d2l-menu-item-return');
+		return this.shadowRoot && this.shadowRoot.querySelector('d2l-menu-item-return');
 	}
 
 	_getMenuItems() {
-		const slot = this.shadowRoot.querySelector('slot');
+		const slot = this.shadowRoot && this.shadowRoot.querySelector('slot');
 		if (!slot) return;
 		const items = slot.assignedNodes({ flatten: true }).filter((node) => node.nodeType === Node.ELEMENT_NODE);
 

package/components/overflow-group/overflow-group.js

@@ -318,7 +318,7 @@ class OverflowGroup extends RtlMixin(LocalizeCoreElement(LitElement)) {
 	}
 
 	_chomp() {
-		if (!this._itemLayouts) return;
+		if (!this.shadowRoot || !this._itemLayouts) return;
 
 		this._overflowMenu = this.shadowRoot.querySelector('.d2l-overflow-dropdown');
 		this._overflowMenuMini = this.shadowRoot.querySelector('.d2l-overflow-dropdown-mini');

package/components/scroll-wrapper/demo/scroll-wrapper-test.js

@@ -53,7 +53,7 @@ class TestScrollWrapper extends RtlMixin(LitElement) {
 	}
 
 	focus() {
-		forceFocusVisible(this.shadowRoot.querySelector('d2l-scroll-wrapper')._container);
+		if (this.shadowRoot) forceFocusVisible(this.shadowRoot.querySelector('d2l-scroll-wrapper')._container);
 	}
 
 }

package/components/selection/selection-action.js

@@ -79,7 +79,7 @@ class Action extends LocalizeCoreElement(SelectionObserverMixin(ButtonMixin(RtlM
 	}
 
 	focus() {
-		const elem = this.shadowRoot.querySelector('d2l-button-subtle');
+		const elem = this.shadowRoot && this.shadowRoot.querySelector('d2l-button-subtle');
 		if (elem) elem.focus();
 	}
 

package/components/selection/selection-input.js

@@ -142,7 +142,7 @@ class Input extends SkeletonMixin(LabelledMixin(LitElement)) {
 	}
 
 	focus() {
-		const elem = this.shadowRoot.firstElementChild;
+		const elem = this.shadowRoot && this.shadowRoot.firstElementChild;
 		if (elem) elem.focus();
 	}
 

package/components/selection/selection-select-all.js

@@ -57,7 +57,7 @@ class SelectAll extends LocalizeCoreElement(SelectionObserverMixin(LitElement))
 	}
 
 	focus() {
-		const elem = this.shadowRoot.querySelector('d2l-input-checkbox');
+		const elem = this.shadowRoot && this.shadowRoot.querySelector('d2l-input-checkbox');
 		if (elem) elem.focus();
 	}
 

package/components/switch/switch-mixin.js

@@ -213,7 +213,7 @@ export const SwitchMixin = superclass => class extends RtlMixin(FocusVisiblePoly
 	}
 
 	focus() {
-		const elem = this.shadowRoot.querySelector('.d2l-switch-container');
+		const elem = this.shadowRoot && this.shadowRoot.querySelector('.d2l-switch-container');
 		if (elem) elem.focus();
 	}
 

package/components/table/table-col-sort-button.js

@@ -71,7 +71,7 @@ export class TableColSortButton extends LitElement {
 	}
 
 	focus() {
-		const button = this.shadowRoot.querySelector('button');
+		const button = this.shadowRoot && this.shadowRoot.querySelector('button');
 		if (button) button.focus();
 	}