聚合物1.6：沒有被造型的元素

Question

我有一個聚合物元素，我一直試圖風格現在幾個小時。我已經看過幾個視頻和文檔，幾乎所有的東西都包含了一個ID，只是將它作爲正常的樣式應該可以工作，但事實並非如此。

我有代碼在這裏：http://codepen.io/nanobird_/pen/pEWWqW/

這是我的DOM模塊代碼：

<script src="https://cdnjs.cloudflare.com/ajax/libs/polymer/0.5.6/polymer.min.js"></script> 

<dom-module id="kink"> 
    <template strip-whitespace> 
     <style> 
      :host { 
       display: inline-flex; 
       border: 1px solid black; 

       z-index: 0; 
       line-height: 1; 

       height: 40px; 
       width: 16em; 
       margin: 2px 8px; 
      } 

      #kink-color { 
       width: 4px; 
       background-color: aquamarine; 
      } 

      #kink-text { 
       background-color: green; 
       margin-left: 4px; 
       text-overflow: ellipsis; 
      } 
     </style> 

     <div id="kink-color"></div> 
     <div id="kink-text"><content></content></div> 
    </template> 



    <script> 
     Polymer({ 
      is: 'kink', 

      properties: { 
       pref: String 
      } 
     }); 
    </script> 
</dom-module> 

<kink pref="yes">Kink</kink> 

自定義元素應該類似於股利組的外觀略低於它 - 一個小樣本的盒子左邊的顏色。

我在這裏做錯了什麼？

Answer 1

https://developer.mozilla.org/de/docs/Web/API/Document/registerElement

標籤名稱
自定義元素的名稱。該名稱必須包含短劃線（ - ），例如my-tag。

也https://www.polymer-project.org/1.0/docs/devguide/registering-elements

看到規範，自定義元素的名稱必須包含一個破折號（ - ）。