shadow tag doesn't work with nested elements

[Marco Magnetti]

so, i'm italian, and my english is very very poor, but i really need your help.

i'm writing my custom element named super-element (code below) 

super-element is extended by child-element.

it's work! but, shadow and content tag doesn't work.

this is the code, please help me!

super-element

<polymer-element name="super-element">

<template>
  <div class="hlg">
     <content></content>
  </div>
</template>
<script>
 Polymer('super-element',{});
</script>

</polymer-elemnt>

child-element

<polymer-element name="child-element" extends="super-element">
<template>
 <shadow>
   <p>this content is not viewed on super-element</p>
 </shadow>
</template>
<script>
Polymer('child-element',{});
</script>
</polymer-element>

[Rob Dodson]

Hey Marco,

You can't place stuff in between <shadow> tags. It ignores content placed inside of it.

So there are 2 options:

1. Make the content come from the light dom (http://jsbin.com/buvamo/2/edit)
2. Don't extend the super-element, instead use an instance of it inside of child-element (http://jsbin.com/duvop/2/edit)

Which solution you choose depends on what you are trying to accomplish. So maybe the better question is: what are you trying to build?


Btw, the closing tag of your super-element is misspelled. It should be </polymer-element>

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/e316c1ba-fb1f-4db9-a762-5414d93fde57%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Marco Magnetti]

the second option is good for me! thx

in my project i need to create a generic object that containing a generic layout with title, header, tabs and content

• Title contains a simple text
  
• header, contains a div, with some stuff
• tabs are defined into the object, but are handled when is used
• content contains a page content 

maybe i can use  content with select tag

<!-- for title-->
<content select=".title"></content>

<!-- for header-->
<content select=".header"></content>

<!-- for tabs maybe with <ul><li></li></ul> and "template" into the  -->
<content select=".tabs"></content>

<!-- for content -->
<content select=".content"></content>

what do you think about this solution?

[Rob Dodson]

It's hard to say what will be a good solution without seeing what you're building. You may want to turn some of those content elements into their own custom elements and then compose them together. But I'd say just try to build what youre building and if you get stuck come back and post some more code and we'll all help you move forward :)

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/192744ea-0185-4315-bd43-bfb3a957385b%40googlegroups.com.

[Marco Magnetti]

Inserisci qui il codice...

Works fine!! i have used this solution to implement a preformatted "activity" into my web applicaton.

so:

this is my preformatted activity:

<polymer-element name="stc-activity">
     <template>
         <link rel="stylesheet" href="style.css"/>
             <core-header-panel class="activity-panel" mode="waterfall-tall">
                 <core-toolbar id="toolbar" class="core-header">
                     <paper-icon-button id="navicon" icon="menu" on-tap="{{navTapped}}"></paper-icon-button>
                         <div id="act-title" flex>
                             <content select=".actTitle"></content>
                         </div>
            <!--TODO System Menu -->
                        <paper-icon-button icon="search"></paper-icon-button>
                        <paper-icon-button icon="more-vert"></paper-icon-button>
                        <div id="toolbarContent" class="middle fit">
                            <content select=".actHeader"></content>
                        </div>
                        <!-- Tabs -->
                        <div class="bottom fit" horizontal center-justified layout>
                            <paper-tabs id="tabs" selected="{{currentTab}}" flex>
                                <template repeat="{{t in actTabs}}">
                                    <paper-tab class="navTab">{{t}}</paper-tab>
                                </template>
                            </paper-tabs>
                        </div>
                    </core-toolbar>
               <div id="contentdiv" class="content" title="titolo">
        <content select=".actContent[1]"></content>
    </div>
</core-header-panel>
</template>
<script>
Polymer('stc-activity',{
     /*Functions */
     currentTabChanged: function() {
    console.log(this.currentTab);
      },
     /*Vars*/
     actTitle:"Unextended Activity",
     actContent:"lorem ipsum...",
     actTabs:["tab1","tab2","tab3"],
   currentTab:0,
  });
 </script>
</polymer-element>

And this is an use case:

<polymer-element name="act-art26">
        <template>
                <stc-activity>
                        <div class="actTitle">Articolo 26</div>
                        <div class="actHeader">This is an header<div>intodiv</div></div>
                        <div class="actContent" name="tab 1 name">content of tab 1</div>
<!--
                How can i bind into a template repeat to create multiple tabs?
                        <div class="actContent" name="tab 2 name">content of tab 2</div>
-->
                </stc-activity>
        </template>
        <script>
                Polymer('act-art26',{  });
        </script>
</polymer-element>

Only one problem... i want to use this use case to create multiple tab for multiple contents using the sintax in the code (<div class="actContent"...) there is any way to make it's possible?

Thanks for your disponibility

[Rob Dodson]

You can use template repeat to create multiple tabs. See: http://jsbin.com/tubuxe/2/edit

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/763c9966-f72a-4df9-a2a0-2ba1d9a0e63f%40googlegroups.com.