Question

假设一个组件由3个内部组件组成，其中<outer-tag>的shadow DOM看起来像这样：

<div>
    <h1>The Outer Tag</h1>
    <my-tag1/>
    <my-tag2/>
    <my-tag3/>
</div>

现在让我们说<outer-tag>，<my-tag1/>和<my-tag3/>始终相同。但我希望<my-tag2>可插拔。即通过。我怎么在聚合物中做到这一点？

Answer 1

如果我理解正确的问题，那么您正在寻找一种将随机子项分配到外部标记的DOM（Documentation）的方法。

以下是您在示例中的操作方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Outer-inner tags</title>
    <base href="https://polygit.org/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>

而不是＆＃34; .tag2＆＃34;你可以更普遍地写＆＃34;随机标签＆＃34;。 select属性接受类似CSS的选择器。

如何将组件传递给Polymer中的组件

1 个答案: