HTML and CSS is getting crazy

<div class="shadow-root-example">
    <strong>Shadow Root Example</strong>
    <div class="isolated">
        World
        <template shadowrootmode="open">
            Hello
            <div><slot>Default</slot></div>
            <span class="blue">Blue</span>

            <style>
                :host {
                    color: red;
                }

                div {
                    color: green;
                }
            </style>
        </template>
    </div>
</div>

<div class="style-scope-example">
    <strong>Style @scope Example</strong>
    <div class="scoped">
        Hello
        <div>World</div>
        <span class="blue">Blue</span>

        <style>
            @scope {
                :scope {
                    color: red
                }

                div {
                    color: green
                }
            }
        </style>
    </div>
</div>

<style>
    :root {
        color-scheme: dark;
    }

    .blue {
        color: blue;
    }
    
    body {
        display: grid;
        place-content: center;
        gap: 1em;
    }
</style>