如何在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上创建自定义元素的实例

回答

相关问题