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.
For more options, visit https://groups.google.com/d/optout.
