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 On Sun, May 17, 2015 at 6:10 PM, DS Morse <[email protected]> wrote: > 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. > > On Sunday, May 17, 2015 at 3:51:14 PM UTC-6, arthure wrote: >> >> 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. >> >> On Sat, May 16, 2015 at 6:07 PM, DS Morse <[email protected]> wrote: >> >>> 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? >>> >>> On Friday, May 15, 2015 at 12:34:03 PM UTC-6, arthure wrote: >>>> >>>> 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 >>>> >>>> >>>> On Fri, May 15, 2015 at 10:56 AM, Julien Silland <[email protected]> >>>> wrote: >>>> >>>>> 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 >>>>> >>>>> 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 [email protected]. >>>>> To view this discussion on the web visit >>>>> https://groups.google.com/d/msgid/polymer-dev/CAKyYh8A_JxkjbFiqxfyUqjs_NknSrNvMo1_ORXwfDtt7gggNBg%40mail.gmail.com >>>>> <https://groups.google.com/d/msgid/polymer-dev/CAKyYh8A_JxkjbFiqxfyUqjs_NknSrNvMo1_ORXwfDtt7gggNBg%40mail.gmail.com?utm_medium=email&utm_source=footer> >>>>> . >>>>> For more options, visit https://groups.google.com/d/optout. >>>>> >>>> >>>> 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 [email protected]. >>> To view this discussion on the web visit >>> https://groups.google.com/d/msgid/polymer-dev/9555d981-68a0-4c4a-8b77-ee0485ec88a6%40googlegroups.com >>> <https://groups.google.com/d/msgid/polymer-dev/9555d981-68a0-4c4a-8b77-ee0485ec88a6%40googlegroups.com?utm_medium=email&utm_source=footer> >>> . >>> >>> For more options, visit https://groups.google.com/d/optout. >>> >> >> 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 [email protected]. > To view this discussion on the web visit > https://groups.google.com/d/msgid/polymer-dev/1ca46c2e-ca0d-4ce6-b649-164e08ad06bc%40googlegroups.com > <https://groups.google.com/d/msgid/polymer-dev/1ca46c2e-ca0d-4ce6-b649-164e08ad06bc%40googlegroups.com?utm_medium=email&utm_source=footer> > . > > For more options, visit https://groups.google.com/d/optout. > 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 [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CADSbU_xvV9RFnesMMoni9%2Bcwk5um-dKCe86QeXF9%3Da6PvunzHQ%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
