Javascript 聚合物：创建一个；“一般”；自定义元素_Javascript_Polymer_Web Component_Custom Element

Javascript 聚合物：创建一个；“一般”；自定义元素

javascript polymer

Javascript 聚合物：创建一个；“一般”；自定义元素,javascript,polymer,web-component,custom-element,Javascript,Polymer,Web Component,Custom Element,我正在尝试构建一个具有属性的元素，这些属性将指定哪个元素应该取代这个元素我在index.html中使用了一个3d卡片翻转元素，该元素定义为： <html> <head> <script src="bower_components/webcomponentsjs/webcomponents.js"> </script> <link rel="import" href="elements/

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

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


函数addElementToDOM（元素名，即）{
var elem=_that.shadowRoot.querySelector（“#element_here”）；
add_elem=document.createElement（元素名称）；
元素追加子元素（添加元素）；
}
聚合物（‘一般元素’{
就绪：函数（）{
如果（
（this.address！=未定义）和
（this.name！=未定义））{
聚合物.进口（
[此地址]，
addElementToDOM（this.name，this）
);
}
}
} );

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

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

很难说您想要实现什么，但我会指出代码中的一些小问题，并提供带有

纸张按钮的工作版本，而不是翻转卡
（因为我没有翻转卡的代码）
TL；DR实时预览：
代码的主要问题是调用函数addlementtodom
，而不是根据请求将其作为回调传递<代码>函数（）{addlementtodom（…）；}
可以
对于自定义元素（如front
和back
）使用无连字符的名称，这是传统上禁止的。请使用虚线作为我的示例
你的功能无缘无故地被污染到了全球空间。我把它放在一个元素里
您可能希望将自定义的翻转卡
放在正面
和背面
之间，但没有内容选择
标签的痕迹
在你的模板里面

您试图以不正确的方式访问shadowRoot
。您可能想看看getDistributedNodes
函数，但在本例中，使用命名约定并通过this.$.element此处
简单地寻址元素更容易
您应该为polyfill明确指定
，以处理未解决的问题
工作守则：
<!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>


添加纸张按钮
聚合物({
addElementToDOM:函数（元素名称）{
var elem=this.$.elementHere；
add_elem=document.createElement（元素名称）；
添加元素appendChild（document.createTextNode（'Hola！'））；
元素追加子元素（添加元素）；
},
domReady:function（）{
if（this.address&&this.name）{
var self=这个；
聚合物.进口（
[自我介绍地址]，
函数（）{self.addlementtodom（self.name）；}
);
}
}
});
正面
返回

我敢打赌，通过应用修复程序1，您的代码可以正常工作，但我强烈建议您也修复其他故障。希望能有帮助
顺便问一下，究竟为什么需要动态导入元素？简单有什么不对
    <template>
      <content select='my-front'></content>
 <!-- ⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓ -->
      <flip-card></flip-card>
      <content select='my-back'></content>
    </template>

很难说你想要实现什么，但我会指出你代码中的一些小问题，并提供带有纸张按钮的工作版本，而不是翻页卡（因为我没有翻页卡的代码）
TL；DR实时预览：
代码的主要问题是调用函数addlementtodom
，而不是根据请求将其作为回调传递<代码>函数（）{addlementtodom（…）；}
可以
对于自定义元素（如front
和back
）使用无连字符的名称，这是传统上禁止的。请使用虚线作为我的示例
你的功能无缘无故地被污染到了全球空间。我把它放在一个元素里
您可能希望将自定义的翻转卡
放在正面
和背面
之间，但没有内容选择
标签的痕迹
在你的模板里面

您试图以不正确的方式访问shadowRoot
。您可能想看看getDistributedNodes
函数，但在本例中，使用命名约定并通过this.$.element此处
简单地寻址元素更容易
您应该为polyfill明确指定
，以处理未解决的问题
工作守则：
<!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>


添加纸张按钮
聚合物({
addElementToDOM:函数（元素名称）{
var elem=this.$.elementHere；
add_elem=document.createElement（元素名称）；
添加元素appendChild（document.createTextNode（'Hola！'））；
元素追加子元素（添加元素）；
},
domReady:function（）{
if（this.address&&this.name）{
var self=这个；
聚合物.进口（
[自我介绍地址]，
函数（）{self.addlementtodom（self.name）；}
);
}