Example 09: Styling the slot directly (has no effect)

padding and background on the <slot>.

How to try it

1. Look at the live example below the output boxes.
2. Below the line the text has no spacing and no colored background.

No spacing, no pink background: a slot has display: contents and generates no box.

Live example

Source

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

<script type="module">
	class MyAlert extends HTMLElement {
		constructor() {
			super();
			this.attachShadow({ mode: 'open' }).innerHTML = `
				<style>
					slot { padding: 1rem; background: #fee; }
				</style>
				<slot></slot>
			`;
		}
	}

	customElements.define('my-alert', MyAlert);
</script>