Bootstrap CSS with Polymer (Revisited)

I maintain that there are times that developers will want web components to look like the rest of their site, not like Material Design. Toward that end, I include a chapter on Bootstrap CSS in Patterns in Polymer. Today, I double check that my solution stills works after upgrading all code the latest versions of Polymer.dart (for the Dart version of the book) and Polymer (for the JavaScript version of the book).

And, thankfully, my solution does continue to work:



One could certainly argue that this solution trades one popular-on-the-verge-of-overused styling approach for another. I would probably agree. The point is not to use a specific style, just to use a common style to validate an approach.

At the risk of spoiling the joy of reading the chapter, the solution boils down to an @import of the common CSS:

<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="pricing-plan" attributes="name type size">
  <template>
    <div class="col-md-{{size}}"><!- ... --></div>
    <style>
      @import '../bower_components/bootstrap/dist/css/bootstrap.min.css';
    </style>
  </template>
  <script src="pricing_plan.js"></script>
</polymer-element>

There is a little more to the solution (so really, you should read the book), but that is the gist.

But this got me thinking, perhaps the <apply-author-styles> custom Polymer element would work as well. So, in the JavaScript version of the code, I install it with Bower:

$ bower install --save eee-c/apply-author-styles
...
bower apply-author-styles#*               install apply-author-styles#434679b8da
bower core-ajax#~0.3.2                    install core-ajax#0.3.6

apply-author-styles#434679b8da bower_components/apply-author-styles
├── core-ajax#0.3.6
└── polymer#0.4.0

core-ajax#0.3.6 bower_components/core-ajax
└── polymer#0.4.0

Then, in my Polymer element HTML definitions, I remove the @import style and instead add the <apply-author-styles> tag:

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import"
      href="../bower_components/apply-author-styles/apply-author-styles.html">
<polymer-element name="pricing-plan" attributes="name type size">
  <template>
    <apply-author-styles></apply-author-styles>
    <div class="col-md-{{size}}"><!-- ... -></div>
  </template>
  <script src="pricing_plan.js"></script>
</polymer-element>

And that works perfectly:



That is nice. I do not know if I will offer that as the solution to applying external styles in Patterns in Polymer, but it seems worth a mention. Worth it if it works in Dart as well.

So I switch over to the Dart version of the chapter code, which is configured to install Bower components in lib/elements by way of a .bowerrc file:

$ cat .bowerrc
{
  "directory": "lib/bower_components"
} 

I again execute bower install --save eee-c/apply-author-styles, this time in my Dart project.

I update my element to use the Bower installed <apply-author-styles>:

<link rel="import" href="../../../packages/polymer/polymer.html">
<link rel="import"
      href="../bower_components/apply-author-styles/apply-author-styles.html">
<polymer-element name="pricing-plan">
  <template>
    <apply-author-styles></apply-author-styles>
    <div class="col-md-{{size}}"><!-- ... --></div>
    <!-- <style> -->
    <!--   @import '/packages/bootstrap_example/assets/bootstrap.min.css'; -->
    <!-- </style> -->
  </template>
  <script type="application/dart" src="pricing_plan.dart"></script>
</polymer-element>

But run into problems that I have seen before. Actually, when I saw this previously, the error was much more helpful. This time, all I get is:

Uncaught TypeError: undefined is not a function    polymer.js:96
  (anonymous function)                             polymer.js:96
  (anonymous function)                             polymer.js:99

And:

Exception: NoSuchMethodError: method not found: 'whenPolymerReady'
Receiver: Instance of 'JsFunction'
Arguments: [Closure: () => dynamic]               package:polymer/src/loader.dart:103

Eventually, I realize that the polymer.js generating the error is the one installed via Bower, not the one bundled with Polymer.dart. So I have to do what I did before: hand-edit core-xhr.html in lib/bower_components to point to the Polymer.dart version. Horrible.

I do not think this is easily solved. It would seem that any JavaScript Polymer element that depends on core-xhr and, by extension, core-ajax, will not be usable in Polymer.dart. Since <apply-author-styles> is such a beast, it would seem that I am out of luck, leaving the @import solution as the best and only available. Unless I am willing to rewrite and maintain apply-author-styles in Dart as well...



Day #200

‹prev | My Chain | next›