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>

Answer 2

I'm pretty sure that your inner <content> element is purged when the outer <content> element selects its content.

Answer 3

Can you provide a jsfiddle or plnkr or anything for this? Polymer imports so many things, it's hard to trouble-shoot an issue without building our own project ourselves.

Without having the source to trouble-shoot this, it sounds like you might need to add the attributes to allow users to change preferences within your element in the <polymer-element> tag:

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

See here: https://www.polymer-project.org/docs/polymer/polymer.html#declarative-event-mapping

That should allow users to configure your custom element. Once again, without having the code to tinker with, not sure if this is going to work for your situation?