modulerizr
Version:
Integrate a powerful, component based architecture to your legacy project in just a few steps
35 lines (31 loc) • 1.6 kB
HTML
<html lang="en"><head>
<title>Scope Styles</title>
</head>
<body>
<!--
In this example we have scoped styles.
With scoped styles they don't affect other components - neither child-components.
-->
<style>
.styleFromSrc {
color: blue;
}
</style>
<div data-v-734de3c9 id="734de3c9" data-component="scoped-styles-1"><style>
/*These styles are global and can have siteeffects to all other components*/
.globalFromComponent1 {
color: red;
}
</style>
<style>.local[data-v-734de3c9],.local_1[data-v-734de3c9]{color:green}</style>
<div class="globalFromComponent1" data-v-734de3c9>This is a red text. </div>
<div class="local" data-v-734de3c9>This is a green text. But the selector is scoped. </div>
<div class="local_1" data-v-734de3c9>This is also a green text. And the selector is scoped.</div>
<div class="styleFromSrc" data-v-734de3c9>This text is blue, because the styledefinition comes from the src-file</div>
</div>
<div data-v-4d87162a id="4d87162a" data-component="scoped-styles-2"><style>.local[data-v-4d87162a]{color:brown}</style>
<div class="globalFromComponent1" data-v-4d87162a>This is a red text, because styles in component .scoped-styles-1 had no scope-attribute. </div>
<div class="local" data-v-4d87162a>This is a brown text. But the selector is scoped. </div>
<div class="local_1" data-v-4d87162a>This is a black text. Because the definition in the other component is scoped an does not affect this here.</div>
</div>
</body></html>