@brightspace-ui/core 1.213.1 → 1.216.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/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,7 +52,7 @@ class CodeView extends LitElement {
 	}
 
 	forceUpdate() {
-		this._updateCode(this.shadowRoot.querySelector('slot'));
+		if (this.shadowRoot) this._updateCode(this.shadowRoot.querySelector('slot'));
 	}
 
 	get _codeTemplate() {

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/filter.js

@@ -213,7 +213,7 @@ 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();
 	}
 
@@ -523,7 +523,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 +538,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) {

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;

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/demo/html-block.html

@@ -80,6 +80,37 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>HTML Block (compact)</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-html-block compact>
+						<template>
+							<h1>heading 1</h1>
+							<h2>heading 2</h2>
+							<h3>heading 3</h3>
+							<h4>heading 4</h4>
+							<h5>heading 5</h5>
+							<h6>heading 6</h6>
+							<div><strong>strong</strong></div>
+							<div><b>bold</b></div>
+							<div>text</div>
+							<pre>preformatted</pre>
+							<p>paragraph</p>
+							<ul>
+								<li>unordered item 1</li>
+								<li>unordered item 2</li>
+							</ul>
+							<ol>
+								<li>ordered item 1</li>
+								<li>ordered item 2</li>
+							</ol>
+							<div><a href="https://d2l.com">anchor</a></div>
+						</template>
+					</d2l-html-block>
+				</template>
+			</d2l-demo-snippet>
+
 			<h2>HTML Block (math)</h2>
 
 			<d2l-demo-snippet>