Polymer 1.x: Getting custom element to say HELLO WORLD in Plunker

Question

In this Plunk, why won't the x-foo element render HELLO WORLD?.

Given the more complex content-el seems to be importing an iron-data-table perfectly correctly. Am I overlooking something simple? Please answer with a working plunk.

http://plnkr.co/edit/p7IE7v6DHLVnEggeO8PF?p=preview

<base href="https://polygit.org/polymer/components/">
<link rel="import" href="polymer/polymer.html">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>

<dom-module id="x-foo">
    <template>
        <style></style>
        HELLO WORLD
    </template>

  <script>
    (function() {
      'use strict';
      Polymer({
        is: 'x-foo',

            });
        })();
  </script>
</dom-module>

Answer 1

You'll notice the browser console displays:

https://polygit.org/polymer/components/polymer/polymer.html Failed to load resource: the server responded with a status of 400 ()

https://polygit.org/polymer/components/webcomponentsjs/webcomponents-lite.min.js Failed to load resource: the server responded with a status of 400 ()

x-foo.html:14 Uncaught ReferenceError: Polymer is not defined

The browser cannot find the required imports for Polymer because your <base> URL has a malformed polygit configuration in x-foo.html:

<base href="https://polygit.org/polymer/components/">

Expected URL format for polygit.org:

<server-name>/[<configurations>/]components/<component>/<path>

where <configurations>/ is:

<component>[+<org>]+<ver>|:<branch>|*

So your <base> URL should be any of the following:

<base href="https://polygit.org/components/">
<base href="https://polygit.org/polymer+:master/components/">
<base href="https://polygit.org/polymer+v1.7.0/components/">

plunker