Is there a way to add <shadow>'s content to the extended element's html without create new shadowRoot?

[Wu Jie]

Hi,

I currently meet a problem with polymer's extends. Basically I wish to extend the base element's functions and its html structure. But I want to rewrite the base element's css. I use <shadow> and found it will create a new shadowRoot which make me hard to control the css in the extended element.

Here is the code:

The base element: 

<polymer-element 
    name="fire-ui-ti" 
    constructor="FireTreeItem"
    on-mousedown="{{mousedownAction}}"
    on-mouseup="{{mouseupAction}}"
    on-dblclick="{{dblclickAction}}"
    >
    <template>
        <style>
             .bar { border: 1p solid #fff; }
        </style>

        <div class="wrapper">
            <div class="bar"></div>
            <div class="input-wrapper"></div>
        </div>
    </template>
    <script>...</script>
<polymer-element>

The extended element:

<polymer-element 
    name="hierarchy-item" 
    extends="fire-ui-ti"
    constructor="HierarchyItem"
    on-mousemove="{{mousemoveAction}}"
    on-dragover="{{dragoverAction}}"
    on-dragenter="{{dragenterAction}}"
    >
    <template>
        <style>
            .bar { border: 1px solid #red; }
        </style>
        <shadow></shadow>
    </template>
    <script type="text/javascript" src="hierarchy-item.js"></script>
</polymer-element>

As you can see, the HirarchyItem will use the TreeItem as base element, but I want to use the .bar border be red and found the <shadow> will generate new shadowRoot which separate my style configuration.

I wish polymer can support some function to add parent's template directly into the child's element, without creating a new shadow root under it. Just like this:

<polymer-element 
    name="hierarchy-item" 
    extends="fire-ui-ti"
    constructor="HierarchyItem"
    on-mousemove="{{mousemoveAction}}"
    on-dragover="{{dragoverAction}}"
    on-dragenter="{{dragenterAction}}"
    >
    <template>
        <style>
            .bar { border: 1px solid #red; }
        </style>
        <parent-shadow></parent-shadow> // <== this one will add parent's <template> directly into this position.
    </template>
    <script type="text/javascript" src="hierarchy-item.js"></script>
</polymer-element>

[Steve Orvell]

Here are some options:

1. It's easy to do this type of thing yourself:

  a. put the template outside the polymer element and capture a reference to it in the element's script

    <template>...

    <polymer-element ... > ...

    (function() {

      var template = document._currentScript.ownerDocument.querySelector('template');

    })();

  b. put the template content wherever you want, e.g.: 

    this.shadowRoot.appendChild(document.importNode(template.content, true));

2. In your extendee's template style, use this selector ':host::shadow .bar'. This will match .bar in any of the host's shadowRoots.

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/d4588cc4-9579-4013-90fd-58ce1ab946fc%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.