dart - polymer :将内容嵌套在内容中

Question

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

因此，如果使用了我的Element，则用户可以输入一个按钮，而不是defaultBtn来显示。但是，如果未给出按钮，则将显示带有按钮文本的defaultBtn。但是，用户还应该可以选择使用defaultBtn并输入将在按钮中显示的文本或图标。

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

Answer 1

根据规范，它不起作用。

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

The content element that satisfies all of the following conditions represents a content insertion point:

• The root node of the content element is a shadow root
• There is no other content element in the ancestors of the content element
• There is no shadow element in the ancestors of the content element

考虑到这一点，我想您不能使此内容与嵌套的内容元素一起使用。

这将工作。如果同时应用了自定义图标，则将获胜

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