Polymer "inheritance" proposal - expose more mixins!!

[ebidel]

From @kristianmandrup on September 30, 2015 7:45

I fully understand why you wen't away from full components inheritance. A crude weapon indeed.
However it would be VERY convenient if all elements exposed their style, properties and behaviour as mixins for other elements to build on.

This IS currently possible, so it is only a matter of enhancing existing elements to follow this pattern to allow for better composition.

This would also help to solve the "problem" with the content selector limitation: googlearchive/core-selector#39

Example paper-scroll-header-panel

var mixinElement = Polymer.registry('paper-scroll-header-panel')

Polymer.extend({
  properties: [
    mixinElement.properties, 
    AnotherSetOfproperties, 
  ],
  behaviors: [
    myOtherMixinElement.behaviors,
    someNiceBehavior,
    mixinElement.behaviors
  ]
}, {
  // my specific element overrides and customizations
});

You could of course see a behavior as a full set of properties and methods which form a logical unit. Then expose methods and properties as separate mixin units as well. Then allow full inheritance as a convenience, which simply inherits all behaviors and the shared styles exposed by the elements as well.
Provide full flexibility and granular control.

Cheers!

Copied from original issue: googlearchive/polymer-patterns#46

[ebidel]

From @kristianmandrup on September 30, 2015 13:44

After some research into polymer core I see the following methods are already available, however not really documented very well. I guess they could be used as a starting point?

Polymer.Base

     * @method extend
     * @param {Object} prototype Target object to copy properties to.
     * @param {Object} api Source object to copy properties from.
     * @return {Object} prototype object that was passed as first argument.
     */
    extend: function(prototype, api) {

    /**
     * Copies props from a source object to a target object.
     *
     * Note, this method uses a simple `for...in` strategy for enumerating
     * properties.  To ensure only `ownProperties` are copied from source
     * to target and that accessor implementations are copied, use `extend`.
     *
     * @method mixin
     * @param {Object} target Target object to copy properties to.
     * @param {Object} source Source object to copy properties from.
     * @return {Object} Target object that was passed as first argument.
     */
    mixin: function(target, source) {
      for (var i in source) {
        target[i] = source[i];
      }
      return target;
    },

    copyOwnProperty: function(name, source, target) {

  Polymer.Base.chainObject = function(object, inherited) {

[jfrazzano]

Eric, wow. Thanks. That's cool.

[jaichandra]

I have been trying to do this for a while and I finally got a version working. Here's the link: https://plnkr.co/edit/S3hwK5?p=preview. This certainly has limitations and I have only tested these with paper-elements, but it works for me so far. Below is the mixin for quick review:

Polymer.TemplateMixin = (element) => {
    let superClass = document.createElement(element).constructor;
    return class extends superClass {

        static get template() {
            if (!this.hasOwnProperty('_template')) {
                this._template = Polymer.DomModule.import(this.is, 'template') ||
                    Object.getPrototypeOf(this.prototype).constructor.template;
            }
            return this._template;
        }

        static finalize() {
            if (!this.hasOwnProperty('_template')) {
                let superTemplate = superClass.template;
                let cssText = Polymer.StyleGather.cssFromTemplate(this.template.cloneNode(true));
                if (cssText) {
                    let style = document.createElement('style');
                    style.textContent = cssText;
                    let sNode = this.getLastStyleNode(superTemplate);
                    if (sNode) {
                        sNode.insertAdjacentElement('afterend', style);
                    } else {
                        superTemplate.content.insertBefore(style, superTemplate.content.firstChild);
                    }
                }
                this._template = superTemplate.cloneNode(true);
            }
            super.finalize();
        }

        static getLastStyleNode(template) {
            let styles = template.content.querySelectorAll('style');
            return styles[styles.length - 1];
        }
    }
}

[kristianmandrup]

@jaichandra
Sweet :) I hope this gets built in with Polymer 2.0 at some point.

[jaichandra]

The above code certainly has performance limitations. I would need help figuring out a much cleaner way in Polymer to ensure each component does this template merge only once.

[kristianmandrup]

I created this Polymer extension years ago.
Allows a Polymer 1.0 element to be extended.

var myElement = Polymer.findRegistered('my-element');

  // Each key: properties, props, methods act as a mixin.
  // properties - properties object
  // props - all attributes (non-functions)
  // methods: - all own functions
  // behaviors: - all own functions and attributes
  var myExtension = Polymer.extend({
    parent: myElement,
    // properties: myElement.properties,
    // props: myElement.props,
    // methods: myElement.methods,
    // behaviors: myElement.behaviors
  }, {
    is: 'ext-element',
  });

  Polymer(myExtension);

[jaichandra]

@kristianmandrup I got the performance issue fixed. Updated above code with latest.

[TimvdLippe]

This has shipped with the native API of customElements.get and inheritance with ES6 class extension 🎉