@brightspace-ui/core 1.215.0 → 1.219.0

package/components/form/form-errory-summary.js

@@ -104,8 +104,8 @@ class FormErrorSummary extends LocalizeCoreElement(RtlMixin(LitElement)) {
 		} else {
 			focusEleSelector = 'd2l-button-icon';
 		}
-		const focusEle = this.shadowRoot.querySelector(focusEleSelector);
-		focusEle.focus();
+		const focusEle = this.shadowRoot && this.shadowRoot.querySelector(focusEleSelector);
+		if (focusEle) focusEle.focus();
 	}
 
 	_toggleExpandCollapse(e) {

package/components/form/form-native.js

@@ -133,7 +133,7 @@ class FormNative extends FormMixin(LitElement) {
 			}
 		}
 		this._errors = errorMap;
-		if (errorMap.size > 0) {
+		if (this.shadowRoot && errorMap.size > 0) {
 			const errorSummary = this.shadowRoot.querySelector('d2l-form-error-summary');
 			this.updateComplete.then(() => errorSummary.focus());
 		}

package/components/form/form.js

@@ -100,7 +100,7 @@ class Form extends FormMixin(LitElement) {
 		const flattenedErrorMap = flattenMap(errorMap);
 		this._errors = errorMap;
 		if (errorMap.size > 0) {
-			const errorSummary = this.shadowRoot.querySelector('d2l-form-error-summary');
+			const errorSummary = this.shadowRoot && this.shadowRoot.querySelector('d2l-form-error-summary');
 			if (errorSummary) {
 				this.updateComplete.then(() => errorSummary.focus());
 			}

package/components/hierarchical-view/hierarchical-view-mixin.js

@@ -222,7 +222,7 @@ export const HierarchicalViewMixin = superclass => class extends superclass {
 	}
 
 	isActive() {
-		if (this.childView && !this.shown) {
+		if ((this.childView && !this.shown) || !this.shadowRoot) {
 			return false;
 		} else {
 			const content = this.shadowRoot.querySelector('.d2l-hierarchical-view-content');
@@ -290,7 +290,7 @@ export const HierarchicalViewMixin = superclass => class extends superclass {
 
 			this.__isAutoSized = true;
 			let rect;
-			if (view === this) {
+			if (view === this && this.shadowRoot) {
 				rect = this.shadowRoot.querySelector('.d2l-hierarchical-view-content').getBoundingClientRect();
 			} else {
 				rect = view.getBoundingClientRect();
@@ -325,6 +325,7 @@ export const HierarchicalViewMixin = superclass => class extends superclass {
 			view.resize();
 			return;
 		}
+		if (!this.shadowRoot) return;
 		const content = this.shadowRoot.querySelector('.d2l-hierarchical-view-content');
 		const contentRect = content.getBoundingClientRect();
 		if (contentRect.height < 1) return;
@@ -432,7 +433,7 @@ export const HierarchicalViewMixin = superclass => class extends superclass {
 		if (rootTarget === this || !rootTarget.hierarchicalView) return;
 
 		const parentView = this.__getParentViewFromEvent(e);
-		if (parentView === this) {
+		if (this.shadowRoot && parentView === this) {
 			const content = this.shadowRoot.querySelector('.d2l-hierarchical-view-content');
 
 			const data = e.detail.data;
@@ -495,16 +496,16 @@ export const HierarchicalViewMixin = superclass => class extends superclass {
 			/* deep link scenario */
 			this.show(e.detail.data, e.detail.sourceView);
 		}
-		const content = this.shadowRoot.querySelector('.d2l-hierarchical-view-content');
+		const content = this.shadowRoot && this.shadowRoot.querySelector('.d2l-hierarchical-view-content');
 
-		if (reduceMotion) {
+		if (this.shadowRoot && reduceMotion) {
 
 			content.classList.add('d2l-child-view-show');
 			requestAnimationFrame(() => {
 				e.detail.sourceView.__dispatchShowComplete(e.detail.data, e.detail);
 			});
 
-		} else {
+		} else if (this.shadowRoot) {
 
 			if (e.detail.isSource && this.__getParentViewFromEvent(e) === this) {
 				const animationEnd = () => {

package/components/html-block/html-block.js

@@ -217,6 +217,7 @@ class HtmlBlock extends LitElement {
 	}
 
 	_findSlottedElement(tagName, slot) {
+		if (!this.shadowRoot) return;
 		if (!slot) slot = this.shadowRoot.querySelector('slot');
 		return slot.assignedNodes({ flatten: true })
 			.find(node => (node.nodeType === Node.ELEMENT_NODE && node.tagName === tagName.toUpperCase()));

package/components/inputs/demo/input-radio-solo-test.js

@@ -38,7 +38,7 @@ class TestInputRadioSolo extends LitElement {
 	}
 
 	focus() {
-		const elem = this.shadowRoot.querySelector('input');
+		const elem = this.shadowRoot && this.shadowRoot.querySelector('input');
 		if (elem) elem.focus();
 	}
 

package/components/inputs/demo/input-radio-spacer-test.js

@@ -19,7 +19,7 @@ class TestInputRadioSpacer extends LitElement {
 	}
 
 	focus() {
-		const elem = this.shadowRoot.querySelector('input');
+		const elem = this.shadowRoot && this.shadowRoot.querySelector('input');
 		if (elem) elem.focus();
 	}
 

package/components/inputs/demo/input-select-test.js

@@ -53,7 +53,7 @@ class TestInputSelect extends SkeletonMixin(RtlMixin(LitElement)) {
 	}
 
 	focus() {
-		const elem = this.shadowRoot.querySelector('select');
+		const elem = this.shadowRoot && this.shadowRoot.querySelector('select');
 		if (elem) elem.focus();
 	}
 

package/components/inputs/input-checkbox.js

@@ -205,7 +205,7 @@ class InputCheckbox extends SkeletonMixin(RtlMixin(LitElement)) {
 	}
 
 	focus() {
-		const elem = this.shadowRoot.querySelector('input.d2l-input-checkbox');
+		const elem = this.shadowRoot && this.shadowRoot.querySelector('input.d2l-input-checkbox');
 		if (elem) elem.focus();
 	}
 

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

@@ -163,10 +163,12 @@ class ListDemoDragAndDrop extends LitElement {
 			targetItems.splice(targetIndex, 0, dataToMove[i]);
 		}
 
-		await this.requestUpdate();
+		this.requestUpdate();
+		await this.updateComplete;
 
 		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-button-mixin.js

@@ -1,5 +1,6 @@
 import '../colors/colors.js';
 import { css, html } from 'lit-element/lit-element.js';
+import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ListItemMixin } from './list-item-mixin.js';
 
 export const ListItemButtonMixin = superclass => class extends ListItemMixin(superclass) {
@@ -34,13 +35,18 @@ export const ListItemButtonMixin = superclass => class extends ListItemMixin(sup
 		return styles;
 	}
 
+	constructor() {
+		super();
+		this._primaryActionId = getUniqueId();
+	}
+
 	_onButtonClick() {
 		/** Dispatched when the item's primary button action is clicked */
 		this.dispatchEvent(new CustomEvent('d2l-list-item-button-click', { bubbles: true }));
 	}
 
 	_renderPrimaryAction(labelledBy) {
-		return html`<button aria-labelledby="${labelledBy}" @click="${this._onButtonClick}"></button>`;
+		return html`<button id="${this._primaryActionId}" aria-labelledby="${labelledBy}" @click="${this._onButtonClick}"></button>`;
 	}
 
 };

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);
 	}