How to use the content element in Polymer?

Question

From the documentation it says that the <content> element supports a select attribute which filters nodes via a simple selector.

So should the light dom elements that are targeted at a certain content element contain a css class label/tag/value that allows the browser to map it to the corresponding content element that has that css tag/label/value set in the select attribute? Are contained light dom elements with no such labels mapped to a <content> element with no select attribute? An example that enumerates the possibilities would be very helpful.

Answer 1

So we have this little description about the DOM Distribution:

To support composition of an element's light DOM with its local DOM, Polymer supports the <content> element. The <content> element provides an insertion point at which an element's light DOM is combined with its local DOM. The <content> element supports a select attribute which filters nodes via a simple selector.

In shadow DOM, the browser maintains separate light DOM and shadow DOM trees, and creates a merged view (the composed tree) for rendering purposes.

In shady DOM, Polymer maintains its own light DOM and shady DOM trees. The document's DOM tree is effectively the composed tree.

This is not too much if somebody want a little detail about what can the <content> element do, so a working example could be the paper-toolbar element :) there is a little more than a simple class select, which is showing us that the select is a querySelector filter:

In HTML you can use the paper-toolbar like this:

<paper-toolbar class="tall">
    <paper-icon-button icon="menu"></paper-icon-button>
    <div class="middle title">Middle Title</div>
    <div class="bottom title">Bottom Title</div>
</paper-toolbar>

And the template has this:

<template>
    <!-- style --->

    <div id="topBar" class$="toolbar-tools [[_computeBarExtraClasses(justify)]]">
        <content select=":not(.middle):not(.bottom)"></content>
    </div>

    <div id="middleBar" class$="toolbar-tools [[_computeBarExtraClasses(middleJustify)]]">
        <content select=".middle"></content>
    </div>

    <div id="bottomBar" class$="toolbar-tools [[_computeBarExtraClasses(bottomJustify)]]">
        <content select=".bottom"></content>
    </div>
</template>

So you can see that you able to filter the content "slot" with CSS selectors, and the content without the select is should have all of the children content.

In JavaScript you can also access to the <content> slots content two way; you can get the children from an container element which has the content in it and you can use this.getContentChildren('#content_id') which will give you the elements Array.

Polymer has a more detailed API to work with <content>, and the description on their site:

https://www.polymer-project.org/1.0/docs/devguide/local-dom#light-dom-children

UPDATE

From 2.0 <content> will be <slot> and from 1.7 they are added the slot element for pre-migration, you should use that. It's a bit different than the content element selector you can only set a name property and outside you have to use that name to specify which slot you want to put in:

<template>
    <!-- style -->
    <paper-toolbar>
        <slot name="header"></slot>
    </paper-toolbar>
    <slot name="content"></slot>
</template>

<my-element>
    <div class="title" slot="header">title</div>
    <div slot="content">content</div>
</my-element>

Sadly slot does not get all of the specified slotted elements only the first one from the DOM so we have to redesign a few element which is used the css selector before.