Javascript 如何在Polymer上创建自定义元素的实例_Javascript_Html_Css_Polymer

Javascript 如何在Polymer上创建自定义元素的实例

javascript html css polymer

Javascript 如何在Polymer上创建自定义元素的实例,javascript,html,css,polymer,Javascript,Html,Css,Polymer,我在创建聚合自定义元素的实例时遇到了一个问题。我使用paper按钮和paper toggle按钮创建自定义元素。我想使用Javascript（createElement）创建它的一个实例。然而，它的风格没有保留下来。我需要你的帮助 button-status.html  <link rel="import" href="/bower_components/polymer/polymer.html"> <l

我在创建聚合自定义元素的实例时遇到了一个问题。我使用paper按钮和paper toggle按钮创建自定义元素。我想使用Javascript（createElement）创建它的一个实例。然而，它的风格没有保留下来。我需要你的帮助

button-status.html

<!-- button-status.html -->
<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/paper-button/paper-button.html">
<link rel="import" href="/bower_components/paper-toggle-button/paper-toggle-button.html">

<dom-module id="button-status">
<template>
    <style>
        .dname {
            margin-top: 15px;
            margin-left: 5px;
            margin-right: 5px;
            min-height: 50px;
            max-height: 50px;
            min-width: 300px;
            width: 100%;
            height: 50px;
            position: relative;
            display: block;
            color: #000;
            border: 1px solid rgba(0, 0, 0, 0.2);
            box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4);
        }
        .toggle {
            width: 15%;
            height: 100%;
            position: absolute;
            top: 0;
            right: 0;
        }
        paper-button {
            width: 80%;
            height: 100%;
        }
        paper-toggle-button {
            position: absolute;
            width: 100%;
            height: 100%;
            right: 0;
            left: 0;
        }   
        #yourButton {
            position: absolute;
            top: 100px;
        }
    </style>
<div class="dname">
    <paper-button>
        <content></content>
    </paper-button>
    <div class="toggle">
        <paper-toggle-button id="myButton"></paper-toggle-button>
    </div>
</div>
</template>
<script>
    Polymer({
        is: 'button-status',
        properties : {
            deviceId: {
                type: String,
                notify: true
            }
        }
    });
</script>
</dom-module>


.dname{
边缘顶部：15px；
左边距：5px；
右边距：5px；
最小高度：50px；
最大高度：50px；
最小宽度：300px；
宽度：100%；
高度：50px；
位置：相对位置；
显示：块；
颜色：#000；
边框：1px实心rgba（0,0,0,0.2）；
盒影：5px5px5pxRGBA（0,0,0,0.4）；
}
.切换{
宽度：15%；
身高：100%；
位置：绝对位置；
排名：0；
右：0；
}
纸扣{
宽度：80%；
身高：100%；
}
纸张切换按钮{
位置：绝对位置；
宽度：100%；
身高：100%；
右：0；
左：0；
}   
#你的按钮{
位置：绝对位置；
顶部：100px；
}
聚合物({
是：'按钮状态'，
特性：{
设备ID：{
类型：字符串，
通知：正确
}
}
});

index.html

<!-- index.html -->

<!DOCTYPE html>

<html lang="ja">

<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <meta charset="UTF-8">
    <link rel="import" href="/bower_components/polymer/polymer.html">
    <link rel="import" href="/bower_components/paper-input/paper-input.html">
    <link rel="import" href="/bower_components/gold-email-input/gold-email-input.html">
    <link rel="import" href="/bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
    <link rel="import" href="/bower_components/paper-listbox/paper-listbox.html">
    <link rel="import" href="/bower_components/paper-item/paper-item.html">
    <link rel="import" href="/bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html">
    <link rel="import" href="/bower_components/paper-dialog/paper-dialog.html">
    <link rel="import" href="/bower_components/paper-button/paper-button.html">
    <link rel="import" href="/bower_components/paper-toolbar/paper-toolbar.html">
    <link rel="import" href="/bower_components/iron-icons/iron-icons.html">
    <link rel="import" href="/bower_components/paper-icon-button/paper-icon-button.html">
    <link rel="import" href="/bower_components/paper-toggle-button/paper-toggle-button.html">
    <link rel="import" href="/cre_components/button-status/button-status.html">
    <link rel="import" href="/cre_components/device-add-input/device-add-input.html">
    <link rel="stylesheet" type="text/css" href="/css/dashboard.css">
    <title>Create new account</title>
</head>

<body>
    <paper-toolbar>
        <paper-icon-button icon="menu"></paper-icon-button>
        <span class="title">Test</span>
        <a href="help.html">
            <paper-button class="help">Button</paper-button>
        </a>
    </paper-toolbar>
    <section>
        <div id="statusList">
            <button-status device-id = "A01" id="A01">status1</button-status>
            <button-status device-id = "A02" id="A02">status2</button-status> 
        </div>
        <div class="edit">  
            <paper-button raised onclick="dialog.open()">Add</paper-button>
            <paper-button raised>Delet</paper-button>
            <paper-dialog id="dialog">
                <device-add-input></device-add-input>
            </paper-dialog>
        </div>
    </section>
</body>
<script>
    var newEl = document.createElement('button-status');
    newEl.innerHTML = "status3";
    newEl.id = "S03";
    var l = document.getElementById('deviceList');
    l.appendChild(newEl);
</script>
</html>


创建新帐户
试验
状态1
状态2
添加
删除
var newEl=document.createElement（'button-status'）；
newEl.innerHTML=“status3”；
newEl.id=“S03”；
var l=document.getElementById（'deviceList'）；
l、 新儿童；

我不知道我是否理解你的问题，但这是

newEl.innerHTML=“status3”将覆盖元素的所有html

添加了工作元素的Jsbin-->
我不知道我是否理解你的问题，但这是newEl.innerHTML=“status3”将覆盖元素的所有html

添加了工作元素的Jsbin-->
非常感谢您的回复。哼它工作得很好。如果自定义元素在index.html之外（这意味着包装的自定义元素html），则它不起作用。服务器端有问题吗？你好，Elias。我有一个新问题。未捕获的DomeException:未能对“文档”执行“registerElement”：类型“undefined”的注册失败。类型名称无效。我犯了这个错误。我在另一个分支上创建了这个没有聚合物的站点。我用聚合物检查分支并重新加载，我接受了它。此代码以前粘贴过（当我发布此问题时。此代码未更改）。如果你也有一些解决方法，你能告诉我吗？非常感谢你的回复。哼它工作得很好。如果自定义元素在index.html之外（这意味着包装的自定义元素html），则它不起作用。服务器端有问题吗？你好，Elias。我有一个新问题。未捕获的DomeException:未能对“文档”执行“registerElement”：类型“undefined”的注册失败。类型名称无效。我犯了这个错误。我在另一个分支上创建了这个没有聚合物的站点。我用聚合物检查分支并重新加载，我接受了它。此代码以前粘贴过（当我发布此问题时。此代码未更改）。如果你也有一些解决办法，你能告诉我吗？