How to inherit styles for manualy extended Polymer Element?

Question

I would like to create new Polymer Element that extends native HTML Element (let's say div ) , so I could use <div is="my-div"> , but inherits behavior from another Polymer element ( my-list ). I have achieved it by:

<polymer-element name="my-list">
    <template>
        <style>
            :host {
                background-color: #EEE;
                display: block;
                border: 1px solid black;
            }
        </style>
        <content></content>
    </template>
    <script>
        Polymer('my-list', {
            color: "red",
            ready: function() {
                console.info("my-list is ready!");
                this.children[0].style.color = this.color;
            }
        });
    </script>
</polymer-element>
<polymer-element name="my-div" extends="div">
    <script>
        (function() {
            var myListProto = Polymer.getRegisteredPrototype("my-list");
            var myDivProto = Polymer.extend({}, myListProto);
            myDivProto.color = "blue";
            Polymer('my-div', myDivProto);
        }());
    </script>
</polymer-element>

Working jsFiddle is here .

The problem is that my-list styles does not apply to my-div .

Is there any way to inherit them as well? Or should I do such extension some other way?

Answer 1

It looks to me like what you are doing here is a mixin technique. You have two classes that are not on the same inheritance chain that you want to have share an API.

You did the mixin part for the prototype, and you can do it for the template too, but there are various details.

Here is a JsBin showing how I would do it: http://jsbin.com/vuru/1/edit

I framed it more directly as a mixin problem, which made it easier for me to work with.

Key info I used:

• If you define a registerCallback() in your Polymer prototype, it's called back at registration time with the prototype as this and a reference to the <polymer-element> as an argument.

• you can override fetchTemplate to customize template selection

• If you don't install a template into the <polymer-element> before registerCallback() time, you have to invoke the shadow-dom CSS polyfill engine by hand (that's this bit: Platform.ShadowCSS.shimStyling(...) ).

Answer 2

Not exactly what you want but core-style lets you define a style you can easily include in your templates. Then when you extend an element just be sure to include the same core-style in your child template.

I messed around for a while trying to get the extended element into the child element via in the child-element but this didn't seem to work.

Anyways, core-style makes passing styles around pretty easy. see here https://pascalprecht.github.io/2014/08/01/sharing-styles-across-web-components-with-polymer-and-core-style/