HTML5 Web Components Automated
Web Components are here to stay. However, there is currently some level of complication needed when setting up a boilerplate element. <shadow-import> has the following features to make life simple again:
- conflicting element names are now supported, with
<shadow-import>it is possible to rename a tag on import - attribute change watching built in
- easy to use with Angular.js
- custom templating, works with all frameworks
Using <shadow-import> is incredibly simple.
For example, importing and using an existing component:
<!doctype html>
<html>
<head>
<script src="../../shadow-import.js"></script>
<shadow-import tag="hero-section" href="components/hero-element/view.html"></shadow-import>
</head>
<body>
<hero-section background-color="#ace">
<h1>Shadow Import</h1>
<p>Flexible, simple, and powerful.</p>
</hero-section>
</body>
</html>To view the result of this example, click here.
For more examples, and for documentation on writing a ShadowComponent, visit the ShadowComponent Documentation.