Question

我有一个Polymer元素我现在已经尝试了几个小时。我已经查看了几个视频，文档，几乎所有内容都包括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>

自定义元素看起来应该类似于div组在其下方的样子 - 左边是一个带有一点颜色的框。

我到底做错了什么？

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

根据规范，自定义元素的名称必须包含短划线（ - ）。

聚合物1.6：元素没有样式

1 个答案: