1
Polymerカスタム要素のインスタンスを作成する際に問題が発生します。 用紙ボタンと用紙トグルボタンを使用してカスタム要素を作成します。 Javascript（createElement）を使用してそのインスタンスを作成したいとします。 しかしそのスタイルは保持されていません。 私はあなたの助けが必要です。Polymerでカスタム要素のインスタンスを作成する方法
ボタン-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>
ありがとう、あなたの返信ありがとうございます。 ハム... 良いです。カスタム要素がindex.htmlの外にある場合（つまり、ラップされたカスタム要素htmlを意味します）、動作しません。 サーバー側で問題がありますか？ –
こんにちはエリアス。私には新しい問題があります。 キャッチされていないDOMException： 'ドキュメント'で 'registerElement'を実行できませんでした： '未定義'のタイプで登録に失敗しました。タイプ名が無効です。 このエラーが発生しました。私は別の支店にポリマーを使わないでこのサイトを作ります。私はPolymerで支店をチェックアウトしてリロードして、私はそれを受け入れました。 このコードは前に貼り付けられました（この質問を投稿したとき、このコードは変更されませんでした）。 あなたはそれについてもいくつかの解決策があるなら、あなたはそれらを教えてくれますか？ –