如何在Polymer上創建自定義元素的實例

我在創建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>

來源

2017-03-28 Akira Kashihara

我不知道如果我理解你的問題，但是這newEl.innerHTML = "status3";將覆蓋元素的所有HTML。
Jsbin添加元素工作 - > https://jsbin.com/qeyareqemi/1/edit?html,console,output

來源

2017-03-29 11:10:12

非常感謝您的回覆。哼... 它的效果很好。如果自定義元素不在index.html（即意味着包裝的自定義元素html）之外，則不起作用。我在服務器端有問題嗎？ –

你好埃利亞斯。我有一個新問題。未捕獲的DOMException：未能在'Document'上執行'registerElement'：類型'undefined'的註冊失敗。類型名稱無效。我得到了這個錯誤。我在另一個分支上創建了沒有聚合物的網站。我用聚合物檢查分支並重新加載它，我接受了它。此代碼被粘貼之前（當我發佈這個問題，這個代碼沒有改變）。如果你也有一些解決方案，你能告訴我他們嗎？ –

如何在Polymer上創建自定義元素的實例

回答

相關問題