假设一个组件由3个内部组件组成，其中<outer-tag>的影子DOM看起来像这样:
Suppose a component is composed of 3 internal components, where <outer-tag>'s shadow DOM looks something like this:
<div> <h1>The Outer Tag</h1> <my-tag1/> <my-tag2/> <my-tag3/> </div>现在让我们说<outer-tag>，<my-tag1/>和<my-tag3/>始终相同.但是我希望<my-tag2>是可插入的.即通过了.如何在Polymer中做到这一点?
Now let's say that <outer-tag>, <my-tag1/> and <my-tag3/> were always the same. But I want <my-tag2> to be pluggable. i.e. passed in. How would I do that in Polymer?
推荐答案如果我理解正确的问题，那么您正在寻找一种将随机子代分发到外部标签的DOM中的方法(文档).
If I understood the question right, you are looking for a way to distribute random children into the outer-tag's DOM (Documentation).
在示例中，您将按照以下方式进行操作:
Here's how you would do it in your example:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Outer-inner tags</title> <base href="polygit/components/"> <script src="webcomponentsjs/webcomponents-lite.min.js"></script> <link href="polymer/polymer.html" rel="import"> </head> <body> <dom-module id="outer-tag"> <template> <div> <h1>The Outer Tag</h1> <my-tag1></my-tag1> <!-- Tell the <outer-tag> that something will go in here --> <content select=".tag2"></content> <my-tag3></my-tag3> </div> </template> <script> Polymer({ is: 'outer-tag' }); </script> </dom-module> <dom-module id="random-tag"> <template> <div> <h2>Random Tag</h2> <div>I'm a random component</div> </div> </template> <script> Polymer({ is: 'random-tag' }); </script> </dom-module> <!-- Here's how to put them together --> <outer-tag> <random-tag class="tag2"></random-tag> </outer-tag> </body> </html>通常，您可以编写"random-tag"而不是".tag2". select属性接受类似CSS的选择器.
Instead of ".tag2" you could more generally write "random-tag". The select attribute accepts CSS-like selectors.
更多推荐
如何将组件传递给Polymer中的组件
发布评论