Custom HTML elements as layouts?

[Julien Silland]

Heads-up: this could be more of a question for the group in which HTML custom elements are discussed but I figure the intersection with Polymer developers is rather large —

I'm trying to understand whether it is possible to declare a custom HTML element that can wrap arbitrary subelements and 'yield' the rendering of those subelements at a determined insertion point. The syntax below is approximative but should provide a goods idea of what I'm trying to do

<my-list header="My Header" footer="My Footer">

  <li>foo</li>

  <li>bar</li>

</my-list>

<dom-module id="my-list">

  <template>

    <p>{{header}}</p>

    <ul>

      <!-- what goes here? can I automatically insert the <li>s declared above?>

    </ul>

    <p>{{footer}}</p>

  </template>

</dom-module>

This is a simple example — in the greater scheme of things, I'd like to be able to insert/handle arbitrary content whose type may not be known ahead of time (e.g. a <div> or <my-other-element>, etc…).

Basically I'd like to know whether custom HTML elements have the possibility to act as external layouts for other elements as opposed to just encapsulated templates.

Cheers,

-Julien

[Arthur Evans]

What you're looking for is the <content> tag. You can see it in use here:

https://www.polymer-project.org/0.9/docs/start/quick-tour.html

See the third sample down, "Composition with local DOM".

More details here: 

https://www.polymer-project.org/0.9/docs/devguide/local-dom.html#dom-distribution

-Arthur

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CAKyYh8A_JxkjbFiqxfyUqjs_NknSrNvMo1_ORXwfDtt7gggNBg%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.

[Julien Silland]

Thanks you very much — I somehow missed that section.

[DS Morse]

I've never been able to get the <content> tag to work unless the polymer element is in the shadow dom.  Has anyone gotten it to work when the component is in the light?

[Arthur Evans]

I'm not sure exactly what you mean. Do you mean when the element is in the light DOM, 

or when the <content> tag is in the light DOM?

The 0.5 intro tutorial (https://www.polymer-project.org/0.5/docs/start/tutorial/intro.html) has polymer

elements in the light DOM, as does the 0.9 quick tour:

     <picture-frame>

      <image src="images/p-logo.svg">

   </picture-frame>




​Here both <picture-frame> and the <image> tag are in the document's light DOM,

but the <image> is projected into the <picture-frame>'s insertion point.

The content tag itself must be inside an element's shadow DOM to do anything.

It's function is to give an element's light DOM children (like <image> above) an 

insertion point into the element's shadow DOM. 

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/9555d981-68a0-4c4a-8b77-ee0485ec88a6%40googlegroups.com.

[DS Morse]

I was referring to then we place the polymer elements into the light (which was quite difficult in 0.5)

/**

                 * Override the parseDeclaration to force this template into the light DOM

                 */

                parseDeclaration: function(elementElement) {

                    var template = this.fetchTemplate(elementElement);

                    $(this).empty();

                    if (template) {

                        this.lightFromTemplate(template);

                    }

                },

Based on a quick read of the 0.9 docs, it looks like it might be much easier.:

https://www.polymer-project.org/0.9/docs/devguide/local-dom.html#dom-distribution

But the problem was html that looked like this

<x-foo>

 <x-bar><h1>hello world</h1></x-bar>

</foo>  

Where foo was a polymer element which we had placed into the light dom (using the above code) then we could not include <content> in the x-foo template, which made it very difficult to insert the composed content. 

[Arthur Evans]

Ah. So, yes, if you do that, the <content> element won't work.

One of the main problems shadow DOM is designed to solve is composition. Without shadow DOM (or the shady DOM shim in 0.9+), you don't have content projection. 

So I guess the question is: what are you trying to achieve by putting the template in the light DOM?

Thanks,

Arthur

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/1ca46c2e-ca0d-4ce6-b649-164e08ad06bc%40googlegroups.com.