How Scoped CSS Works ?

The CSS code you write inside a component is scoped. While compiling .nijor files, the compiler adds the attribute "n-scope" to each and every HTML element inside the template tag and also modifies the CSS code inside the style tag such that the styles only apply to the elements of that particular component. The value of the 'n-scope' attribute is same for all the HTML elements inside a particular Nijor component.
For example :

        
                <template>
                    <div>
                        <h1>Hello World</h1>
                    </div>
                </template>
                <style>
                    div{
                       dispaly : flex; 
                    }
                    h1{
                        color : #0066f6;
                     }
                </style>
            
    

The above code becomes somewhat like the code below.

        
                <template>
                    <div>
                        <h1>Hello World</h1>
                    </div>
                </template>
                <style>
                    div{
                       dispaly : flex; 
                    }
                    h1{
                        color : #0066f6;
                     }
                </style>
            
    

<template> <div n-scope="nsjiue73j"> <h1 n-scope="nsjiue73j">Hello World</h1> </div> </template> <style> div[n-scope="nsjiue73j"]{ dispaly : flex; } h1[n-scope="nsjiue73j"]{ color : #0066f6; } </style>