modulerizr
Version:
Integrate a powerful, component based architecture to your legacy project in just a few steps
48 lines (35 loc) • 1.51 kB
HTML
<html lang="en"><head>
<title>OnceAttribute-2</title>
</head>
<body>
<!--
In this example we will show how to render styles and scripts just once - even though they would be rendered multiple times via component
-->
<div data-v-594a0367 id="594a0367" data-component="once-attribute-example"><script src="path/to/js-file.js"></script>
<!--This will be rendered once-->
<script src="path/to/js-file-once.js"></script>
<link href="path/to/css.css" data-v-594a0367>
<script>
//This is also rendered multiple times
var renderedMultipleTimes = 'component';
</script>
<script>
var renderedOnce = 'once';
</script>
<!--styles are rendered once automatically-->
<style>.color[data-v-594a0367]{color:green}</style>
</div>
-------------------------------------------------------
<div data-v-594a0367 id="594a0367" data-component="once-attribute-example"><script src="path/to/js-file.js"></script>
<!--This will be rendered once-->
<!-- Here was a component with attribute "m-once", which also exists above. -->
<link href="path/to/css.css" data-v-594a0367>
<script>
//This is also rendered multiple times
var renderedMultipleTimes = 'component';
</script>
<!-- Here was a component with attribute "m-once", which also exists above. -->
<!--styles are rendered once automatically-->
<!-- Here was a component with attribute "m-once", which also exists above. -->
</div>
</body></html>