Inlining web components built with polymer inside one HTML file

Question

I have the following web component built with Polymer:

<link rel="import" href="../bower_components/polymer/polymer.html"></link>

<script>
    // register a new element
    Polymer({
        is: "proto-element",
        ready: function () {
            console.log("proto-element is going live...");
            this.innerHTML = "I'm a proto-element. Check out my prototype!";
        }
    });
</script>

and I consume it inside the 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 this sample here.

What I want to do is to bundle everything into index.html file including every link import I have for web components. At the end, index.html file should be on its own. Is it possible to do it in this context?

Putting the polymer import and the script to register the element inside of index.html — user1795832, May 30 '15 at 18:01

score 0 · Answer 1 · answered May 30 '15 at 18:59

It seems to be possible to inline web components with Vulcanize. After installing vulcanize, running the following command did the trick (output stuff below with > is Windows specific):

vulcanize index.html > build.html

More info: Concatenating Web Components with Vulcanize

Inlining web components built with polymer inside one HTML file

1 Answers1