聚合物:创建“常规"聚合物自定义元素 [英] Polymer: Create a "general" custom element
问题描述
我正在尝试使用属性指定要替换哪个元素的元素.
I am attempting to build an element with attributes that would specify which element should take place of this element.
为此，我在index.html中定义了一个用于此目的的3d卡翻转元素:
I have a 3d-card flip element that I am using fo this purposes in the index.html that is defined as:
<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在这里定义:
The general-element.html is defined here:
<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>
警告:输出为空白，控制台中出现错误，指出 card-flip上的属性是在聚合物升级元素之前绑定的数据.这可能会导致错误的绑定类型.
WARNING: The output is a blank with an error in the console saying Attributes on card-flip were data bound prior to Polymer upgrading the element. This may result in incorrect binding types.
这可以通过任何方式实现吗?
Can this be achieved in any way?
推荐答案
很难说出您要实现的目标，但是我会指出代码中的一些小问题，并为工作版本提供paper-button而不是flip-card(因为我没有flip-card的代码.)
It’s hard to say what you are trying to achieve, but I would point at some glitches within your code and provide the working version with paper-button instead of flip-card (since I have no code of flip-card.)
TL; DR 实时预览: http://plnkr.co /edit/yO865EkclZAsWBhzVSU4?p =预览
-
代码的主要问题是调用函数
addElementToDOM而不是按照对于常规元素，自定义元素(如front和back)使用无连字符名称.请在我的示例中使用破折号.You use hyphen-less names for custom elements (like
frontandback) which is conventionally prohibited. Please use dashed as in my example.您的函数无缘无故地污染了全局空间.我把它放在一个元素里.
You have your function polluted into global space for no reason. I put it inside an element.
您可能希望将自定义
flip-card放在front和back之间，但是没有content select='front/back'标记的痕迹 在模板中.You were likely want to puts your custom
flip-cardbetweenfrontandback, but there is no vestige ofcontent select='front/back'tag inside your template.您正试图以不正确的方式访问
shadowRoot.您可能想看一下getDistributedNodes函数，但是在这种情况下，使用命名约定和简单地通过this.$.elementHere寻址元素就更容易了.You are trying to access
shadowRootin improper way. You might want to take a look atgetDistributedNodesfunction, but in this case it’s easier to use naming convention and address an element simply bythis.$.elementHere.您应该为polyfill明确指定
<body unresolved>，以处理未解决的问题.You are supposed to explicitly specify
<body unresolved>for the polyfill to take care about unresolved things.工作代码:
<!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，您的代码可以正常工作，但我强烈建议您也修复其他故障.希望对您有所帮助.
I bet, your code could be working by applying the fix #1 but I strongly suggest you to fix other glitches as well. Hope it helps.
P.S.为什么在地球上需要动态导入元素?简单有什么问题
P.S. Why on the earth you needed to dynamically import your element? What’s wrong with simple
<template> <content select='my-front'></content> <!-- ⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓ --> <flip-card></flip-card> <content select='my-back'></content> </template>这篇关于聚合物:创建“常规"聚合物自定义元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
