Creating custom elements in Polymer 1.3.0

Question

I'm new to programming and to Polymer. I am trying to create custom elements out of the demo code.

This is the code from the demo:

Polymer Github

I want to make a custom element of one of those examples, but it's not working, here's my attempt:

<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-styles/typography.html">

<link rel="import" href="../../bower_components/iron-demo-helpers/demo-snippet.html">
<link rel="import" href="../../bower_components/iron-demo-helpers/demo-pages-shared-styles.html">

<link rel="import" href="../../bower_components/iron-collapse/iron-collapse.html">
<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../../bower_components/iron-icons/communication-icons.html">
<link rel="import" href="../../bower_components/iron-icons/hardware-icons.html">
<link rel="import" href="../../bower_components/iron-icons/social-icons.html">
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../bower_components/paper-checkbox/paper-checkbox.html">
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../bower_components/paper-styles/color.html">
<link rel="import" href="../../bower_components/paper-styles/typography.html">
<link rel="import" href="../../bower_components/paper-card/paper-card.html">

<polymer-element name ="test-favorite" noscript>
  <style is="custom-style" include="demo-pages-shared-styles">
    demo-snippet {
      --demo-snippet-demo: {
        background: var(--paper-grey-200);
        padding: 8px;
      };
      --demo-snippet-code: {
        max-height: 300px;
      };
    }
    paper-card {
      width: 100%;
    }
    .horizontal {
      @apply(--layout-horizontal);
    }
    .justified {
      @apply(--layout-justified);
    }
    .amber {
      background: var(--paper-amber-900);
    }
    .lime {
      background: var(--paper-lime-500);
    }
    .cyan {
      background: var(--paper-cyan-500);
    }
    .dark {
      background: var(--paper-blue-grey-500);
    }
    paper-card.dark, paper-card.amber, paper-card.lime, paper-card.cyan {
      color: white;
      --paper-card-header-color: white;
    }
    paper-checkbox {
      display: block;
      margin-bottom: 4px;
      --paper-checkbox-label-color: white;
      --paper-checkbox-unchecked-color: white;
    }
    paper-icon-button {
      color: var(--paper-grey-600);
    }
    paper-icon-button.white {
      color: white !important;
    }
  </style>

  <template>
    <div class="vertical-section-container centered">
      <h3>A paper-card with a simple heading, header image, body content, and actions</h3>
      <demo-snippet>
        <template>
          <paper-card heading="Emmental" image="http://placehold.it/350x150/FFC107/000000">
            <div class="card-content">
              Emmentaler or Emmental is a yellow, medium-hard cheese that originated in the area around Emmental, Switzerland. It is one of the cheeses of Switzerland, and is sometimes known as Swiss cheese.
            </div>
            <div class="card-actions">
              <paper-button>Share</paper-button>
              <paper-button>Explore!</paper-button>
            </div>
          </paper-card>
        </template>
      </demo-snippet>
    </div>
  </template>
</polymer-element>

Can someone please help? Its just some copy&paste, but I dont get it to work.

Thanks in advance!

Cheers

Answer 1

The <polymer-element> tag is from the 0.5 syntax (obsolete). To create modules with the 1.x syntax, you would use <dom-module>. Here's the equivalent code that creates the paper-card from the demo:

<head>
  <base href="https://polygit.org/polymer+:master/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-button/paper-button.html">
  <link rel="import" href="paper-card/paper-card.html">
  <link rel="import" href="paper-styles/typography.html">
</head>

<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <style>
      paper-card {
        width: 100%;
      }
    </style>
    <template>
      <paper-card heading="Emmental" image="http://placehold.it/350x150/FFC107/000000">
        <div class="card-content">
          Emmentaler or Emmental is a yellow, medium-hard cheese that originated in the area around Emmental, Switzerland. It is one of the cheeses of Switzerland, and is sometimes known as Swiss cheese.
        </div>
        <div class="card-actions">
          <paper-button>Share</paper-button>
          <paper-button>Explore!</paper-button>
        </div>
      </paper-card>
    </template>
    <script>
      Polymer({
        is: 'x-foo',
        properties: {
          foo: {
            type: String,
            value: "Hello world!"
          }
        }
      });
    </script>
  </dom-module>
</body>

^jsbin

I recommend using the Polymer Starter Kit, which includes a couple elements that you could customize.