Ole Ole - 2 months ago 29
HTML Question

How to use the content element in Polymer?

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

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