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

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

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

4

3 回答 3

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>
于 2014-12-11T18:31:28.987 回答
0

你能为此提供一个 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

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

于 2014-12-05T18:02:37.260 回答
0

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

于 2014-11-26T13:05:17.880 回答