Installing bootstrap-web-components to polymer

Question

I am playing with polymerjs.

Goal

I want to create a custom element using polymerjs with bootstrap modal dialog encapsulated in this custom element. The clean solution seems to be to use mike costello's bootstrap-web-components

boostrap-modal.html

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/bootstrap-web-components/dist/imports.html">

<polymer-element name="bootstrap-modal" attributes="script css">
    <template>
        <bs-modal title="Title" show="false">
            Dialog Contents
        </bs-modal>
    </template>

    <script>
    </script>
</polymer-element>

Problem

I used bower to install the library. My project has the root Polymer and in this folder resides the index.html file, bower.json file and a folder bower_components. My bootstrap and bootstrap-web-components folders reside in the bower_components folder. I import the bootstrap-web-components imports.html file only in my custom element.

Upon running, I get an Uncaught TypeError: undefined is not a function on the 13th line of bootstrap-web-components.js

Thank you for your help!

Mike Mike · Accepted Answer · 2015-04-16T20:13:11

Back when the repo was created in 2013 polymer used register() this has changed to registerElement(). I've updated the repo and Bower package accordingly.

To import first make sure your site has the HTMLImports & CustomElements polyfills now at http://webcomponents.org

Then you can <link rel="import" href="dist/imports.html">

For a working example view source at http://mikecostello.github.io/bootstrap-web-components

Installing bootstrap-web-components to polymer

1 Answers