Создание пользовательских элементов в Polymer 1.3.0

Question

Я новичок в программировании и Полимере. Я пытаюсь создать пользовательские элементы из демонстрационного кода.

Это код из демки:

Polymer Github

Я хочу сделать пользовательский элемент одного из этих примеров, но это не работает, вот моя попытка:

<!-- 
@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> 

Кто-то может помочь? Его просто копия & пасты, но я не получаю ее на работу.

Заранее благодарен!

Приветствия

Answer 1

<polymer-element> тег от 0,5 синтаксиса (устаревшее). Чтобы создать модули с синтаксисом 1.x, вы должны использовать <dom-module>. Вот эквивалентный код, который создает paper-card из демки:

<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

Я рекомендую использовать Polymer Starter Kit, который включает в себя a couple elements, что вы можете настроить.