Example 10: Wrapper around the slot (works)

The same component, but padding and background sit on a <div class="box"> around the slot.

How to try it

1. Look at the live example below the output boxes.
2. Compare with example 09.

Pink background, spacing, and all the text is dark red, including the bold word from the light DOM: the color is inherited through the flat tree.

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>
					.box { padding: 1rem; background: #fee; color: darkred; }
				</style>
				<div class="box"><slot></slot></div>
			`;
		}
	}

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