Question

我在创建Polymer自定义元素的实例时遇到问题。我使用纸质按钮和纸张切换按钮创建自定义元素。我想使用Javascript（createElement）创建它的实例。但它的风格并没有保留。我需要你的帮助。

按钮-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>

的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>

Answer 1

我不知道我是否理解了您的问题，但此newEl.innerHTML = "status3";将覆盖您元素的所有html。
添加元素工作的Jsbin - ＆gt; https://jsbin.com/qeyareqemi/1/edit?html,console,output

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

1 个答案: