聚合物：在内容中嵌套内容答案

【问题标题】：Polymer: Nesting content inside of content聚合物：在内容中嵌套内容
【发布时间】：2015-01-24 19:53:29
【问题描述】：

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

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

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

【问题讨论】：

标签： dart polymer dart-polymer shadow-dom content-tag

【解决方案1】：

根据规范，它不起作用。

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

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

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

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

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

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

这个会起作用的。如果同时应用自定义图标，则获胜

<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>

【讨论】：

我知道我可以让它与 Dart 或 JS 一起使用，但希望没有它也能实现......但规范确实回答了我的问题

【解决方案2】：

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

【讨论】：

但如果我在内容中添加内容，它确实有效。如果我将聚合物元素留空，则将显示默认内容。如果我将某些东西放入我的聚合物元素中，它将显示而不是默认输入。
我实际上经常使用它来为我的元素提供默认内容
我可能是错的，但从来没有见过这个，我想记住这在我尝试时没有做任何有用的事情。有趣的是你有不同的经历。当元素实际上有子元素时会发生什么？然后替换您的默认内容吗？这可能也会删除内部的<content> 标签。
你指的是哪个元素？如果我将一个带有子元素的元素放入我的聚合物元素中，所有内容都会显示，但不会显示默认内容。
我假设如果你有类似<my-poly>xxx</my-poly> 的东西，那么` ` 会被xxx 替换，然后就没有<content select=".useBtnIcon">不再选择其他内容。

【解决方案3】：

你能为此提供一个 jsfiddle 或 plnkr 或任何东西吗？ Polymer 导入了很多东西，如果不自己构建项目，很难解决问题。

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

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

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

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

【讨论】：