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.
On Thu, Oct 9, 2014 at 11:07 PM, Wu Jie <[email protected]> wrote:
> 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>
>
>
>
>
> 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/d4588cc4-9579-4013-90fd-58ce1ab946fc%40googlegroups.com
> <https://groups.google.com/d/msgid/polymer-dev/d4588cc4-9579-4013-90fd-58ce1ab946fc%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/CA%2BrMWZiX7Dsf5fzO%2BHLe5o844ottSA4xQFyZZmLqcJmdk%2B884g%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.
