Example 12: :not(:defined) as a placeholder

The component is deliberately defined only after two seconds. Until then the element is an unknown inline element with its content.

How to try it

Reload the page and watch the first two seconds.
First: a dashed border around the content "The build is still running." (block layout through :not(:defined)).
After two seconds: a solid green border and a warning sign in front of the text (the upgrade is done).

Console output mirrored from console.log() and errors on this page, the same text as in the developer tools

Live example

Source

<style>
	my-alert {
		display: block;
		border: 2px solid green;
		padding: 0.5rem;
	}

	my-alert:not(:defined) {
		display: block;
		border: 2px dashed gray;
	}
</style>

<my-alert>The build is still running.</my-alert>

<script type="module">
	setTimeout(() => {
		class MyAlert extends HTMLElement {
			constructor() {
				super();
				this.attachShadow({ mode: 'open' }).innerHTML = '<span>⚠</span> <slot></slot>';
			}
		}
		customElements.define('my-alert', MyAlert);
	}, 2000);
</script>