Utility code to fix transition animations when closing HTML5 dialog

.css

dialog {
	margin: auto;
	width: 100%;
	min-width: 30vw;
	min-height: 20vw;
	border: none;
	box-shadow: 0 0 16px -4px rgba(0, 0, 0, 0.7);
	opacity: 0;
}
dialog::backdrop {
	background: rgba(0, 0, 0, 0.3);
	opacity: 0;
}
dialog.open::backdrop,
dialog.open {
	opacity: 1;
	transition: opacity .2s;
}
dialog.closing::backdrop,
dialog.closing {
	opacity: 0;
	transition: opacity .2s;
}
@media (min-width: calc(960px - 32px)) {
	dialog {
		width: 480px;
	}
}

.js

document
	.querySelectorAll('dialog')
	.forEach(dialog => {
		new MutationObserver((list, observer) => {
			for (const mutation of list) {
				if (typeof(mutation.oldValue) == 'object') {
					dialog.classList.add('open');
				}
			}
		}).observe(dialog, { attributeFilter: ['open'], attributeOldValue: true })
		dialog.addEventListener('cancel', e => {
			if (dialog.classList.contains('closing')) return;
			e.preventDefault();
			dialog.classList.add('closing');
		});
		dialog.addEventListener('transitionend', e => {
			if (dialog.classList.contains('closing')) {
				dialog.close();
				dialog.classList.remove('open');
				dialog.classList.remove('closing');
			}
		});
	})
;