Polymer：创建“通用”自定义元素答案

【问题标题】：Polymer: Create a "general" custom elementPolymer：创建“通用”自定义元素
【发布时间】：2015-02-10 15:08:44
【问题描述】：

我正在尝试构建一个具有属性的元素，这些属性将指定哪个元素应该代替该元素。

我在 index.html 中有一个 3d 卡片翻转元素，用于此目的，定义为：

<html>
    <head>
        <script src="bower_components/webcomponentsjs/webcomponents.js">
        </script>
        <link rel="import" href="elements/general-element.html">
    </head>
    <body>
        <general-element 
            name="card-flip" 
            address="elements/card-flip.html">
            <front>
                FRONT
            </front>
            <back>
                BACK
            </back>
        </general-element>
    </body>
</html>

这里定义了general-element.html：

<link rel="import" 
    href="../bower_components/polymer/polymer.html">
<polymer-element name="general-element" attributes="name address">
    <template>
        <div id="element_here">
        </div>
    </template>
    <script>

      function addElementToDOM( element_name, _that ) {
          var elem = _that.shadowRoot.querySelector( "#element_here" );
          add_elem = document.createElement( element_name );
          elem.appendChild( add_elem );
      }

        Polymer ( 'general-element', {
          ready: function() {
              if ( 
                  ( this.address != undefined ) && 
                  ( this.name != undefined ) ) {

                  Polymer.import( 
                      [this.address], 
                      addElementToDOM( this.name, this )
                  );
              }
          }
        } );
    </script>
</polymer-element>

警告：输出为空白，控制台中显示错误 在 Polymer 升级元素之前，卡片翻转上的属性是数据绑定的。这可能会导致不正确的绑定类型。

这可以通过任何方式实现吗？

【问题讨论】：

标签： javascript polymer web-component custom-element

【解决方案1】：

很难说出您想要实现的目标，但我会指出您的代码中的一些小故障，并使用paper-button 而不是flip-card 提供工作版本（因为我没有flip-card 的代码。）

TL;DR 实时预览：http://plnkr.co/edit/yO865EkclZAsWBhzVSU4?p=preview

您的代码的主要问题是您调用函数addElementToDOM，而不是按照Polymer.import 的要求将其作为回调传递。 function() { addElementToDOM(...); } 可以。
您对自定义元素使用无连字符的名称（如front 和back），这通常是被禁止的。请在我的示例中使用虚线。
您的函数无缘无故地污染了全局空间。我把它放在一个元素里面。
您可能希望将自定义 flip-card 放在 front 和 back 之间，但没有 content select='front/back' 标签的痕迹在您的模板中。
您正试图以不正确的方式访问shadowRoot。您可能想看看getDistributedNodes 函数，但在这种情况下，使用命名约定和简单地通过this.$.elementHere 来寻址元素会更容易。
您应该为 polyfill 显式指定 <body unresolved> 以处理未解决的问题。

工作代码：

<!doctype html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <title>Add paper button</title>
  <script src="https://www.polymer-project.org/components/webcomponentsjs/webcomponents.js"></script>
  <link href="https://www.polymer-project.org/components/polymer/polymer.html" rel="import"> 
</head>

<body unresolved>
  <polymer-element name="general-element" attributes="name address">
    <template>
      <content select='my-front'></content>
      <div id="elementHere">
      </div>
      <content select='my-back'></content>
    </template>
    <script>
      Polymer ({
        addElementToDOM: function ( element_name ) {
          var elem = this.$.elementHere;
          add_elem = document.createElement( element_name );
          add_elem.appendChild(document.createTextNode('¡Hola!'));
          elem.appendChild( add_elem );
        },

        domReady: function() {
          if ( this.address && this.name ) {
            var self = this;
            Polymer.import( 
              [self.address], 
              function() { self.addElementToDOM( self.name ); }
            );
          }
        }
      });
    </script>
  </polymer-element>
  <general-element 
      name="paper-button" 
      address="https://www.polymer-project.org/components/paper-button/paper-button.html">
      <my-front>
          FRONT
      </my-front>
      <my-back>
          BACK
      </my-back>
  </general-element>
</body>
</html>

我敢打赌，您的代码可以通过应用修复 #1 来工作，但我强烈建议您也修复其他故障。希望对您有所帮助。

P.S.到底为什么需要动态导入元素？简单有什么不好

    <template>
      <content select='my-front'></content>
 <!-- ⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓ -->
      <flip-card></flip-card>
      <content select='my-back'></content>
    </template>

【讨论】：

谢谢你，帮了我很多，我也从你的观察中学到了新东西。我之所以需要这样一个通用元素，是因为项目的前端会根据输入的数据和用户操作动态变化。
好的，很高兴听到这个答案很有帮助。