Polymer: Nesting content inside of content

Question

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

So if my Element gets used, the User can input a Button which will be shown instead of the defaultBtn. But if no Button is given, the defaultBtn with the Button Text will be shown. But the user also should have the Option to use the defaultBtn and to input a text or icon which will be shown in the Button.

If I use a <div class="useBtn"></div> it will be used as the Button. But <div class="useBtnIcon"> BtnText</div> does not seem to work. Is there a way to make this work?

Answer 1

According to the spec its not going to work.

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

With this in mind, i guess, you cant make this thing work with nestetd content elements.

This one will work. Custom Icon wins if both are applied

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