Wrap document var in Polymer Web Component - twitter-bootstrap-3

Question

I'm trying to use bootstrap.js in one of my components, but find that I need to wrap(document) for it to work (correct?).
So far I have:
// Script to work around bootstrap.js not working in Web Components. From https://github.com/Polymer/polymer/issues/625
(function(document){
jQuery.getScript('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js', function() {
console.log('getScript bootstrap.js run successfully!')
});
})(wrap(document));
But it does not seem to work - document is still the original page with my shadow-DOM in, which is inaccessible to bootstrap.js - how can I wrap document so it points to my components DOM for bootstrap.js?

Answer 1

My assumption, that I needed to wrap document, was wrong!
Working example: http://plnkr.co/edit/qRXoiG?p=preview
<link rel="import" href="https://polygit2.appspot.com/components/polymer/polymer.html">
<dom-module id="proto-element">
<link rel="import" type="css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<template>
<style>
</style>
<div class="container">
<h2>Simple Collapsible</h2>
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
<div id="demo" class="collapse">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</template>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
// register a new element called proto-element
Polymer({
is: "proto-element",
// add a callback to the element's prototype
ready: function() {
console.log('bootstrap3_enabled:', (typeof $().emulateTransitionEnd == 'function'));
}
});
</script>
</dom-module>