Question

<!-- my-poly -->
<template>
  <content select=".useBtn">
    <button id="defaultBtn">
      <content select=".useBtnIcon">
        Button
      </content>
    </button>
  </content>
</template>

因此，如果我的元素被使用，用户可以输入一个将显示的按钮而不是defaultBtn。但是如果没有给出Button，将显示带有Button Text的defaultBtn。但是用户也应该选择使用defaultBtn并输入将在Button中显示的文本或图标。

如果我使用<div class="useBtn"></div>，它将用作按钮。但<div class="useBtnIcon"> BtnText</div>似乎不起作用。有没有办法使这项工作？

Answer 1

根据规范它不会起作用。

http://www.w3.org/TR/shadow-dom/#content-insertion-points

满足以下所有条件的内容元素表示内容插入点：


内容元素的根节点是影子根

内容元素的祖先中没有其他内容元素

内容元素的祖先中没有阴影元素

考虑到这一点，我想，你不能让这个东西与nestetd内容元素一起工作。

这个会奏效。如果同时应用自定义图标

，则会获胜

<polymer-element name="the-button">
    <template>

        <content id="contentButton" select=".useBtn">
            <button id="PREFIXEDdefaultBtn">
                Default Button
            </button>
        </content>

        <button id="defaultBtnWithCustomIcon">
            <!--be sure that this content element doesnt contain a default set -->
            <content id="contentIcon" select=".useBtnIcon"></content>
        </button>

    </template>

    <script>
        Polymer('the-button', {
            domReady: function () {
                var customIcon = this.$.contentIcon;

                var disNodes = customIcon.getDistributedNodes();
                //Test if the content element contains distributed nodes.
                if (disNodes.length !== 0) {
                    this.$.contentButton.remove();
                } else {
                    // the button is customized, remove the icon
                    this.$.defaultBtnWithCustomIcon.remove();
                }
            }
        });
    </script>
</polymer-element>

Answer 2

我非常确定当外<content>元素选择其内容时，您的内部<content>元素会被清除。

Answer 3

你能提供一个jsfiddle或plnkr或者其他任何东西吗？聚合物进口了很多东西，如果不自己建造我们自己的项目，很难解决问题。

如果没有消息来解决这个问题，听起来您可能需要添加属性以允许用户在<polymer-element>标记中更改元素中的首选项：

<polymer-element name="my-element" attributes="defaultBtn inputBtn">

见这里：https://www.polymer-project.org/docs/polymer/polymer.html#declarative-event-mapping

这应该允许用户配置您的自定义元素。再一次，没有修改代码，不确定这是否适用于您的情况？

聚合物：将内容嵌套在内容中

3 个答案: