Example of using the Scoped attribute in HTML5

Comments: The HTML5 revolution has brought us a lot of useful new attributes, such as placeholder, download, and hidden. Each new attribute brings us a new control method and control effect on page elements.

In particular, there is a new attribute that allows us to control the attributes of multiple elements, that is, scoped. The scoped attribute marked on the style enables the CSS style to take effect only for partial elements. Specifically, the child elements that store the elements of the style take effect, the only difference from a normal style is that a scoped attribute is added:

The Code is as follows:
<Style scoped>
/* Styles go here */
</Style>

A style with the scoped attribute applies only to the current element and its child elements. Inline styles still have a higher priority than scoped styles. Therefore, it is best to avoid using inline styles. Below we will combine several styles to compare their efficiency scope:

The Code is as follows:
<Div class = "democontain lazy">
<Style scoped>
Div {border: 1px solid green; margin-bottom: 20px; min-height: 40px ;}
. Democontain {background: # f8f8f8 ;}
</Style>
<Div> </div>
<Div style = "border-color: pink;">
<Style scoped>
Div {background: lightblue; border: 1px solid blue ;}
</Style>
<Div> </div>
</Div>
<Div> </div>
</Div>

In the scoped style, you can use any valid CSS style tag, such as media query, as shown below:

The Code is as follows:
<Style scoped>
@ Media only screen and (max-width: 1024px ){
Div {background: #000 ;}
}
</Style>

This new scoped attribute is very useful, especially for those who create templates, CMS users, or some developers who cannot operate the entire style file. But it should be noted that some older browsers do not support this attribute, and in this case, you may need to use jQuery plug-ins (https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin) to fix this problem.