Extending other elements, two questions, invitation to ponder.

Claudius Nicolae

unread,

Oct 27, 2014, 7:03:00 AM10/27/14

to polym...@googlegroups.com

Let's say element B extends A.

<polymer-element name="A">

The property: {{property}}

</template>

Polymer({ property: 'Property defined in A' });

</script>

</polymer-element>

<polymer-element name="B" extends="A">

My own template, with binding: {{property}}

</template>

Polymer(); // no overrides here

</script>

</polymer-element>

1. (templating)

Can B have it's own template without calling "<shadow></shadow>" ?

If yes, will properties and events defined in A be bound the B's new template ?

2. (styling)

Will styles defined for A apply to B, now that the tag name has changed ?

If yes, how much of them? Only those defined on :host, or also those involving the "A" tag name ?

Thanks.

Message has been deleted

santiago esteva

unread,

Oct 27, 2014, 9:35:09 AM10/27/14

to polym...@googlegroups.com

1 - templating: I took core-component-page and extended because I wanted to modify the template. I did not use <shadow></shadow>. So I got the logic but not the template.

If you look at the core-component-page source code (https://github.com/Polymer/core-component-page-dev/blob/master/core-component-page.html) you will see the logic its inherited - properties and events.

<polymer-element name="my-component-page" extends="core-component-page">

<core-toolbar class="appbar">

<span>{{moduleName}}</span>

<a class="choiceC" target="_blank" href="../{{moduleName}}/test/index.html">tests</a>

</core-toolbar>

<core-doc-viewer flex url="{{url}}" sources="{{sources}}"></core-doc-viewer>

</template>

(function(){

Polymer({});

})();

</script>

</polymer-element>

2- I did copy over the css into my own css file.

Hope this helps.

Claudius Nicolae

unread,

Oct 27, 2014, 6:27:28 PM10/27/14

to polym...@googlegroups.com

Thanks for your reply Santiago.

Wouldn't it be nice if the styles would be inherited too ?

On another note, I have the following beef (issue, bug?):

In a child (inheritance) element, ::content selectors need to be doubled.

See the sample code:

https://gist.github.com/clyfe/1bc824479eb2d29c3d13

Is this a bug or expected behavior?

If bug on what repo should I fill ?

santiago esteva

unread,

Oct 27, 2014, 9:13:34 PM10/27/14

to polym...@googlegroups.com

Lets see another way:

:host::shadow::content .my {color: yellow}

If we read the css ...we are definining a rule that applies to any '.my' class that is included in a content insertion point that is contained by a shadowRoot object inside our host element('my-child').

This is why I would do approach the goal.

Now back to your question, I think you may have found a crack. Im not sure. Id encourage you put out there for stackoverflow and may be open an issue in the github repo. Id love to know as well if it is a bug.

And since you are playing with styles inheritance, have you checked out <core-style> . It is a very neat and simple way to distribute styles. It is like thinking in 'composition' of styles versus inheritance.

You should also checkout host-context which will allow you to determine a theme in a parent html element - say <body class="red-theme"> and based on that context determine different styles for each element.

Claudius Nicolae

unread,

Oct 28, 2014, 6:32:48 AM10/28/14

to polym...@googlegroups.com

Now back to your question, I think you may have found a crack. Im not sure. Id encourage you put out there for stackoverflow and may be open an issue in the github repo. Id love to know as well if it is a bug.

https://github.com/Polymer/polymer-dev/issues/124

And since you are playing with styles inheritance, have you checked out <core-style> . It is a very neat and simple way to distribute styles. It is like thinking in 'composition' of styles versus inheritance.

Yes, core-style is really neat. I find inheritance-like behavior useful too (calling it "refined producer").

https://github.com/Polymer/core-style/issues/11

You should also checkout host-context which will allow you to determine a theme in a parent html element - say <body class="red-theme"> and based on that context determine different styles for each element.

Yup, nifty.

Reply all

Reply to author

Forward