javascript - Inlining web components built with polymer inside one HTML file -
i have following web component built polymer:
<link rel="import" href="../bower_components/polymer/polymer.html"></link> <script> // register new element polymer({ is: "proto-element", ready: function () { console.log("proto-element going live..."); this.innerhtml = "i'm proto-element. check out prototype!"; } }); </script> and consume inside following html page:
<!doctype html> <html> <head> <script src="../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> <link rel="import" href="proto-element.html"></link> </head> <body> <div style="background-color: red; height: 50px;"> hey </div> <proto-element></proto-element> <div style="background-color: red; height: 50px;"> hey </div> <proto-element></proto-element> </body> </html> you can find sample here.
what want bundle index.html file including every link import have web components. @ end, index.html file should on own. possible in context?
it seems possible inline web components vulcanize. after installing vulcanize, running following command did trick (output stuff below > windows specific):
vulcanize index.html > build.html more info: concatenating web components vulcanize
Comments
Post a Comment