Question

我正在将我的应用程序从Polymer 1.9升级到Polymer3。正在使用旧版API，以最大程度地减少重写旧组件的工作，并且启用了Shady DOM。

我已经知道Polymer不支持内容标签，我正在尝试将其替换为广告位。但不幸的是，它无法按预期工作。

我的模板是：

<dom-module id="my-component">
    <template>
        <div class="component">
            <div class="header">My header</div>
            <div class="content">
                 <slot name="content"></slot>
            </div>
        </div>
    </template>
    <script>
        Polymer({
            is: 'my-component'});
    </script>

HTML用法：

<my-component><div slot="content">Test content</div></my-component>

结果是：

<my-component>
    <div class="component style-scope my-component">
        <div class="header style-scope my-component">My header</div>
        <div class="content style-scope my-component"></div>
    </div>
    <div slot="content">Test content</div>
</my-component>

如何在Polymer 3中使用插槽？

0 个答案: