Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I managed to get bootstrap.js working for my polymer components by adding the lightdom attribute to their definition.</p> <pre class="lang-dart prettyprint-override"><code>&lt;polymer-element name="my-element-with-bootstrap-js" lightdom apply-author-styles&gt; &lt;template&gt; &lt;div&gt;fancy template markup here&lt;/div&gt; &lt;/template&gt; &lt;script type="application/dart" src="my-element-with-bootstrap-js.dart"&gt;&lt;/script&gt; &lt;/polymer-element&gt; </code></pre> <p>And the host HTML could look like this:</p> <pre class="lang-dart prettyprint-override"><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Unarin&lt;/title&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /&gt; &lt;link rel="import" href="elements/my-element-with-bootstrap-js.html"&gt; &lt;script type="application/dart"&gt;export 'package:polymer/init.dart';&lt;/script&gt; &lt;script src="packages/browser/dart.js" type="text/javascript"&gt;&lt;/script&gt; &lt;link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css"&gt; &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;my-element-with-bootstrap-js&gt;&lt;/my-element-with-bootstrap-js&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Please note: Using the lightdom attribute will replace your components from the shadow DOM to the light DOM, which can cause conflicts between your component's styling and the existing styles of the global context.</p> <p>The related discussion: <a href="https://groups.google.com/a/dartlang.org/forum/#!topic/web-ui/ps6b9wlg1Vk" rel="nofollow">https://groups.google.com/a/dartlang.org/forum/#!topic/web-ui/ps6b9wlg1Vk</a></p> <p>Based on the discussion I wasn't a 100% sure if the lightdom modifier will stay the standard way to achieve this kind of functionality for polymer components. Perhaps the authors could comment on that?</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload