Kevin Powell - Community•8mo ago

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>

<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>

Thanks to "Declarative Shadow Root" we can now create shadow roots without JS. And Thanks to CSS @scope we can scope CSS into an element. Shadow Root isolating styles (with some exceptions like color, font and etc..) also has its own use cases. For example you mostly design your site with layouts like an app. And probably have CSS defaults that helps you build layouts. But for an article or blog post, you might want different defaults, like instead of making margin: 0 on everything, you might wanna use default margins, and you might want default font-sizes for the headings, and default look for the <ul> or <ol> and etc... So you can just create a Shadow Root in those cases. Being able to create an isolated space with its own defaults without any conflicts is great.

1 Reply

shiba.OP•8mo ago

another good thing about @scope is: Right now, Frameworks like Svelte or Vue has to compile CSS to make it scoped. Problem with it is, CSS keeps changing and frameworks can't keep up with new changes to make your CSS scoped correctly, they mostly fail. If there is a native way to scope css, frameworks can just use it.

Gaming

Programming

HTML and CSS is getting crazy