我在创建 polymer 自定义元素的实例时遇到问题。 我使用 paper-button 和 paper-toggle-button 创建一个自定义元素。 我想使用 Javascript(createElement) 创建它的实例。 但其风格并未保留。 我需要你的帮助。
按钮状态.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>
最佳答案
我不知道我是否理解你的问题，但是这个 newEl.innerHTML = "status3"; 将覆盖你元素的所有 html。
添加了元素的 Jsbin 正在工作 -->
https://jsbin.com/qeyareqemi/1/edit?html,console,output
关于javascript - 如何在 Polymer 上创建自定义元素的实例，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43058730/