Kevin Powell - CommunityKP-C
Kevin Powell - Community•2y ago
shiba.

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>


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.
Was this page helpful?